dnde Download - Unduh Kode Sumber dnde

dnde

Sumber daya lainnya

v 07,2021)

Unduh

Seret dan lepas editor email

Layar / demo langsung di sini

Instalasi

 # Yarn
yarn add dnd-email-editor

# NPM
npm install dnd-email-editor

Apa yang termasuk

Alat peraga yang dapat diteruskan ke komponen:

Menopang	Jenis	Bawaan	Opsional	Keterangan
`preview`	Boolean	`true`	BENAR	Tunjukkan/sembunyikan tombol pratinjau inbuilt.
`showUndoRedo`	Boolean	`true`	BENAR	Tunjukkan/sembunyikan tombol undo/redo inbuilt. Anda dapat membuat fungsionalitas undoredo Anda sendiri dengan `undoredo` dari metode API di bawah ini

Editor memaparkan metode API ini

getHtml - Ekspor Desain sebagai Konten HTML
getJson - ekspor sebagai string json, string ini kemudian dapat digunakan dengan loadJson
loadJson - Muat desain yang ada dari string JSON
undoredo - undo dan redo action

Penggunaan

Pengimporan

 import Editor from 'dnd-email-editor' ;

return < Editor / >;

Siapkan ref menggunakan useRef dan berikan ke editor

 const ref = React . useRef ( null ) ;

return < Editor ref = { ref } / > ;

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

Naskah

Inorder untuk menggunakan naskah dan mendapatkan definisi keren, cukup berikan tipe ke referensi

import Editor from 'dnd-email-editor';

const ExampleComponent = () => {

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

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

}

Tujuan

Ada banyak editor seret dan drop yang membantu dalam membuat situs web tetapi tidak email , karena surat banyak berbeda dari a normal html webpage

Bahkan jika ada mail editors yang tersedia, mereka dibayar dan bukan open-source .

Salah satu contohnya adalah unlayer , ia mengklaim sebagai OpenSource tetapi tidak.

Melihat kode sumber mereka, mereka hanya memberikan skrip loader mereka dan menyebutnya sebagai open-source
Kemudian mereka meminta Anda untuk membayar fitur -fiturnya.

Alasan di atas dan juga saya terinspirasi oleh editor drag-n-drop secara umum, jadi saya memutuskan untuk membuatnya.