dnde

拖放电子邮件编辑器

屏幕 /现场演示在这里

安装

 # Yarn
yarn add dnd-email-editor

# NPM
npm install dnd-email-editor

包括什么

可以传递给组件的道具：

支柱	类型	默认	选修的	描述
preview	布尔	true	真的	显示/隐藏内置的预览按钮。
showUndoRedo	布尔	true	真的	显示/隐藏内置的撤消/重做按钮。 您可以使用下面的API方法的undoredo创建自己的底座功能

编辑器公开这些API方法

• getHtml将设计导出为HTML内容
• getJson导出为JSON字符串，然后可以与loadJson一起使用此字符串
• loadJson加载JSON String的现有设计
• undoredo - 撤消和重做动作

用法

• 输入

 import Editor from 'dnd-email-editor' ;

return < Editor / >;

• 使用useRef设置ref并将其传递给编辑器

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

• 打字稿

在使用打字稿并获取凉爽定义的订单中，只需将类型传递给参考

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
• 管理字体
  • 添加自定义字体
  • 列表 / add / deletefonts
• 与Undo / Redo来回走动
• 在浏览器（移动和PC）中预览设计

建立

• 反应
• MJML
• Antd

受到启发

• mailjet
• Unlayer