dnde

Перетаскивать редактор электронной почты

экраны / живая демонстрация здесь

Установка

 # Yarn
yarn add dnd-email-editor

# NPM
npm install dnd-email-editor

Что включено

Реквизит, который можно передать в компонент:

Проп	Тип	По умолчанию	Необязательный	Описание
preview	логический	true	истинный	Показать/скрыть встроенную кнопку предварительного просмотра.
showUndoRedo	логический	true	истинный	Показать/скрыть встроенную кнопку Undo/Refo. Вы можете создать свою собственную функциональность OnceDo с undoredo из методов API ниже

Редактор разоблачает эти методы API

• getHtml - экспортировать дизайн как контент HTML
• getJson - Export как json String, эта строка можно использовать с loadJson
• loadJson - Загрузите существующий дизайн с строки JSON
• undoredo - отменить и переделать действия

Использование

• Импорт

 import Editor from 'dnd-email-editor' ;

return < Editor / >;

• Настройка ref с использованием useRef и передайте его редактору

 const ref = React . useRef ( null ) ;

return < Editor ref = { ref } / > ;

• Использование 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 и получить крутые определения, просто передайте тип в рефери

import Editor from 'dnd-email-editor';

const ExampleComponent = () => {

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

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

}

Цель

Есть много редакторов перетаскивания, которые помогают создавать веб -сайт , но не почты , потому что почты сильно отличаются от a normal html webpage

• Даже если есть mail editors , они оплачиваются, а не с open-source .

Одним из таких примеров будет unlayer , он утверждает, что он открывает, но это не так.

• Глядя на их исходный код, они предоставляют только свой фонд загрузчика и называют его open-source
• Позже они просят вас заплатить за его функции.

Приведенные выше причины, а также меня вдохновили редакторы Drag-N-Drop в целом, поэтому я решил сделать его.

Функции

• Отзывчивые и мобильные электронные письма
• Дизайн электронных писем по перетаскиванию
• Импорт/экспортный дизайн
  • Экспорт/импорт как JSON
  • Экспорт как html
• Управлять шрифтами
  • Добавьте пользовательские шрифты
  • Список / Добавить / Делетефонты
• Переходите взад -вперед с Undo / Redo
• Предварительный просмотр дизайна в браузере (Mobile & PC)

Построен с

• Реагировать
• MJML
• Ант

Вдохновленный

• MailJet
• Unlayer