dnde

E-Mail-Editor Drag & Drop

Bildschirme / Live -Demo hier

Installation

 # Yarn
yarn add dnd-email-editor

# NPM
npm install dnd-email-editor

Was ist enthalten

Requisiten, die an die Komponente übergeben werden können:

Stütze	Typ	Standard	Optional	Beschreibung
preview	boolean	true	WAHR	Zeigen/ausblenden Sie die eingebaute Vorschau -Taste.
showUndoRedo	boolean	true	WAHR	Zeigen/ausblenden Sie die eingebaute Rückgänger-/Wiederherstellungs -Taste. Sie können Ihre eigene Unedores -Funktionalität mit undoredo aus API -Methoden unten erstellen

Der Herausgeber enthält diese API -Methoden

• getHtml - Exportieren Sie das Design als HTML -Inhalt
• getJson - Exportieren Sie als JSON -String, diese Zeichenfolge kann dann mit loadJson verwendet werden
• loadJson - Laden Sie ein vorhandenes Design von JSON String
• undoredo - Rückgängigmachen und Wiederholungsaktionen

Verwendung

• Import

 import Editor from 'dnd-email-editor' ;

return < Editor / >;

• Richten Sie einen ref mit useRef ein und geben Sie ihn an den Herausgeber weiter

 const ref = React . useRef ( null ) ;

return < Editor ref = { ref } / > ;

• Mit 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 ( ) ) ;
  }
} ;

• Typoskript

Um TypeScript zu verwenden und coole Definitionen zu erhalten, übergeben Sie einfach den Typ an den Schiedsrichter

import Editor from 'dnd-email-editor';

const ExampleComponent = () => {

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

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

}

Zweck

Es gibt Soo viele Drag & Drop -Editoren, die beim Erstellen von Websiteen , aber keine E -Mails helfen, da E -Mails stark von a normal html webpage unterscheiden

• Auch wenn mail editors verfügbar sind, werden sie bezahlt und nicht open-source .

Ein solches Beispiel wäre unlayer , es behauptet, OpenSource zu sein, aber es ist nicht.

• Wenn sie sich ihren Quellcode ansehen, stellen sie nur ihre Loader-Skript an und nennen ihn als open-source
• Später bitten sie Sie, die Funktionen zu bezahlen.

Die oben genannten Gründe und ich ließ mich auch von Drag-N-Drop-Redakteuren im Allgemeinen inspirieren, also habe ich mich entschlossen, einen zu machen.

Merkmale

• Reaktionsschnelle und mobilfreundliche E -Mails
• Entwerfen Sie E -Mails von Drag & Drop
• Entwürfe importieren/exportieren
  • Exportieren/Import als JSON
  • Exportieren Sie als HTML
• Schriftarten verwalten
  • Fügen Sie benutzerdefinierte Schriftarten hinzu
  • Liste / Hinzufügen / Deletefonts
• Gehen Sie mit Undo / Redo
• Vorschau des Designs im Browser (Mobile & PC)

Gebaut mit

• Reagieren
• MJML
• Antd

Inspiriert von

• MailJet
• Unvergütung