dnde下載 - dnde源代碼下載

dnde

其他資源

v 07,2021)

下載

拖放電子郵件編輯器

屏幕 /現場演示在這裡

安裝

 # 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}/>
  );

}