dnde

Éditeur d'e-mail glisser et déposer

Écrans / démo en direct ici

Installation

 # Yarn
yarn add dnd-email-editor

# NPM
npm install dnd-email-editor

Ce qui est inclus

Accessoires qui peuvent être transmis au composant:

Soutenir	Taper	Défaut	Facultatif	Description
preview	booléen	true	vrai	Afficher / masquer le bouton d'aperçu intégré.
showUndoRedo	booléen	true	vrai	Afficher / masquer le bouton UNDO / Remoer intégré. Vous pouvez créer vos propres fonctionnalités undoredo avec undoredo à partir des méthodes API ci-dessous

L'éditeur expose ces méthodes API

• getHtml - Exporter la conception en tant que contenu HTML
• getJson - Exporter en tant que chaîne JSON, cette chaîne peut ensuite être utilisée avec loadJson
• loadJson - Chargez une conception existante à partir de la chaîne JSON
• undoredo - annuler et refaire des actions

Usage

• Importation

 import Editor from 'dnd-email-editor' ;

return < Editor / >;

• Configurez une ref en utilisant useRef et passez-la à l'éditeur

 const ref = React . useRef ( null ) ;

return < Editor ref = { ref } / > ;

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

• Manuscrit

Inordre d'utiliser TypeScript et d'obtenir des définitions cool, il suffit de passer le type à la référence

import Editor from 'dnd-email-editor';

const ExampleComponent = () => {

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

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

}

But

Il existe de nombreux éditeurs de glisser-déposer qui aident à créer un site Web mais pas des courriers , car les courriers diffèrent beaucoup d' a normal html webpage

• Même s'il y a mail editors disponibles, ils sont payés et non open-source .

Un tel exemple serait unlayer , il prétend être open source, mais ce n'est pas le cas.

• En regardant leur code source, ils ne fournissent que leur chargeur et l'appellent comme open-source
• Plus tard, ils vous demandent de payer ses fonctionnalités.

Les raisons ci-dessus et aussi j'ai été inspirée par les éditeurs Drag-n-Drop en général, j'ai donc décidé d'en faire un.

Caractéristiques

• E-mails réactifs et conviviaux mobiles
• Des conception des e-mails par glisser-déposer
• Conceptions d'importation / exportation
  • Exporter / importer en JSON
  • Exporter comme HTML
• Gérer les polices
  • Ajouter des polices personnalisées
  • Liste / ajouter / deletefont
• Faire des allers-retours avec Undo / Redo
• Aperçu de la conception dans le navigateur (mobile et PC)

Construit avec

• Réagir
• MJML
• fourmi

Inspiré par

• Courrier
• Débarqueur