dnde

Arraste e solte o editor de e-mail

Telas / demonstração ao vivo aqui

Instalação

 # Yarn
yarn add dnd-email-editor

# NPM
npm install dnd-email-editor

O que está incluído

Adereços que podem ser passados para o componente:

Prop	Tipo	Padrão	Opcional	Descrição
preview	booleano	true	verdadeiro	Mostre/oculte o botão de visualização embutido.
showUndoRedo	booleano	true	verdadeiro	Mostre/oculte o botão Desfo/refazer embutido. Você pode criar sua própria funcionalidade UnderDo com undoredo a partir dos métodos da API abaixo

Editor expõe esses métodos de API

• getHtml - Exportar o design como conteúdo HTML
• getJson - exportar como string json, essa string pode ser usada com loadJson
• loadJson - Carregar um design existente da String JSON
• undoredo - Desfazer e refazer ações

Uso

• Importação

 import Editor from 'dnd-email-editor' ;

return < Editor / >;

• Configure um ref usando useRef e passe para o editor

 const ref = React . useRef ( null ) ;

return < Editor ref = { ref } / > ;

• Usando getHtml() , getJson() , loadJson() , undoredo

 const logValues = ( ) => {
  if ( ref . current ) {
    const html = ref . current . getHtml ( ) ;
    const json = ref . current . getJson ( ) ;
    console . log ( html , json ) ;
  }
} ;

const loadJson = ( json : string ) => {
  if ( ref . current ) {
    ref . current . loadJson ( json ) ;
  }
} ;

const performUndoAction = ( ) => {
  if ( ref . current ) {
    ref . current . undoActionCallback ( ) ;

    // to check if undo is possible
    console . log ( 'is undo empty: ' , ref . current . isUndoEmpty ( ) ) ;
  }
} ;

const performRedoAction = ( ) => {
  if ( ref . current ) {
    ref . current . redoActionCallback ( ) ;

    // to check if redo is possible
    console . log ( 'is redo empty: ' , ref . current . isRedoEmpty ( ) ) ;
  }
} ;

• TypeScript

InOrder para usar o TypeScript e obter definições legais, basta passar o tipo para o árbitro

import Editor from 'dnd-email-editor';

const ExampleComponent = () => {

- const ref = useRef(null);
+ const ref = useRef<Editor>(null);

  return (
    <Editor ref={ref}/>
  );

}

Propósito

Existem tantos editores de arrastar e soltar que ajudam na criação de sites, mas não em e -mails , porque os e -mails diferem muito de a normal html webpage

• Mesmo se houver mail editors disponíveis, eles são pagos e não são open-source .

Um exemplo seria unlayer , afirma ser OpenSource, mas não é.

• Olhando para o código fonte, eles fornecem apenas seu script de carregador e chamam de open-source
• Mais tarde, eles pedem que você pague por seus recursos.

Os motivos acima e também fui inspirado pelos editores Drag-N-Drop em geral, então decidi fazer um.

Características

• E -mails responsivos e amigáveis para dispositivos móveis
• Projetar e -mails por arrastar e soltar
• Designs de importação/exportação
  • Exportação/importação como json
  • Exportar como html
• Gerenciar fontes
  • Adicione fontes personalizadas
  • Lista / Adicionar / DeleteFonts
• Vá para frente e para trás com Undo / Redo
• Visualize o design no navegador (Mobile & PC)

Construído com

• Reagir
• Mjml
• ANTD

Inspirado por

• MailJet
• Não -mais