dnde

Arrastre y suelte el editor de correo electrónico

pantallas / demostración en vivo aquí

Instalación

 # Yarn
yarn add dnd-email-editor

# NPM
npm install dnd-email-editor

¿Qué está incluido?

Accesorios que se pueden pasar al componente:

Apuntalar	Tipo	Por defecto	Opcional	Descripción
preview	booleano	true	verdadero	Mostrar/ocultar el botón de vista previa incorporada.
showUndoRedo	booleano	true	verdadero	Mostrar/ocultar el botón de deshacer/rehacer incorporado. Puede crear su propia funcionalidad de Undoredo con undoredo a partir de los métodos API a continuación

El editor expone estos métodos API

• getHtml : exporte el diseño como contenido HTML
• getJson - Exportar como cadena JSON, esta cadena se puede usar con loadJson
• loadJson : cargue un diseño existente desde la cadena JSON
• undoredo - Deshacer y rehacer acciones

Uso

• Importador

 import Editor from 'dnd-email-editor' ;

return < Editor / >;

• Configurar una ref usando useRef y pasarlo al 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 ( ) ) ;
  }
} ;

• Mecanografiado

EnderS para usar TypeScript y obtener definiciones geniales, simplemente pase el tipo al Ref.

import Editor from 'dnd-email-editor';

const ExampleComponent = () => {

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

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

}

Objetivo

Hay muchos editores de arrastrar y soltar que ayudan a crear el sitio web pero no los correos , porque los correos difieren mucho de a normal html webpage

• Incluso si hay mail editors disponibles, se les paga y no open-source .

Un ejemplo de ello sería unlayer , afirma ser OpenSource pero no lo es.

• Mirando su código fuente, solo proporcionan su script de cargador y lo llaman como open-source
• Más tarde le piden que pague por sus características.

Las razones anteriores y también me inspiraron en los editores de Drag-N-Dop en general, así que decidí hacer uno.

Características

• Correos electrónicos receptivos y amigables con los dispositivos móviles
• Diseñe correos electrónicos por arrastrar y soltar
• Diseños de importación/exportación
  • Exportar/importar como JSON
  • Exportar como HTML
• Gestionar fuentes
  • Agregar fuentes personalizadas
  • List / add / DeleteFonts
• Ir y venir con Undo / Redo
• Vista previa del diseño en el navegador (móvil y PC)

Construido con

• Reaccionar
• MJML
• antd

Inspirado en

• Metra
• Abatimiento