dnde

電子メールエディターをドラッグアンドドロップします

スクリーン /ライブデモはこちら

インストール

 # Yarn
yarn add dnd-email-editor

# NPM
npm install dnd-email-editor

含まれているもの

コンポーネントに渡すことができる小道具：

小道具	タイプ	デフォルト	オプション	説明
preview	ブール	true	真実	内蔵プレビューボタンを表示/非表示にします。
showUndoRedo	ブール	true	真実	組み込みの元に戻す/redoボタンを表示/非表示にします。 以下のAPIメソッドからundoredoを使用して、独自のundoredの機能を作成できます

エディターはこれらの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 ( ) ) ;
  }
} ;

• タイプスクリプト

Inorder TypeScriptを使用してクールな定義を取得するには、タイプをREFに渡すだけです

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ではなく支払われます。

そのような例の1つは、オフェンスルスであると主張unlayerていますが、そうではありません。

• ソースコードを見ると、彼らはローダースクリプトのみを提供し、それをopen-sourceとして呼び出します
• 後で彼らはあなたにその機能を支払うように頼みます。

上記の理由と私は一般的にdrag-n-dropエディターに触発されたので、私はそれを作ることにしました。

特徴

• レスポンシブでモバイルに優しいメール
• ドラッグアンドドロップでメールをデザインします
• インポート/エクスポート設計
  • JSONとしてのエクスポート/インポート
  • HTMLとしてエクスポート
• フォントを管理します
  • カスタムフォントを追加します
  • リスト /追加 / deletefonts
• Undo / Redoて行き来します
• ブラウザでデザインをプレビュー（モバイルとPC）

で構築されています

• 反応します
• MJML
• antd

に触発された

• MailJet
• 解雇