cl editor

Editor teks ringan

Dibangun dengan langsing (tidak ada dependensi eksternal)

Ukuran file (bundel termasuk CSS, HTML dan JS)

• Min: 30kb
• GZIP: 10KB

Instalasi

NPM:

npm install --save cl-editor

Html:

 < head >
  ...
</ head >
< body >
  ...
  < div id =" editor " > </ div >
  ...
</ body > 

Penggunaan

 import Editor from 'cl-editor' ;
// or
const Editor = require ( 'cl-editor' ) ; 

 // Initialize editor
const editor = new Editor ( {
    // <HTMLElement> required
    target : document . getElementById ( 'editor' ) ,
    // optional
    props : {
        // <Array[string | Object]> string if overwriting, object if customizing/creating
        // available actions:
        // 'viewHtml', 'undo', 'redo', 'b', 'i', 'u', 'strike', 'sup', 'sub', 'h1', 'h2', 'p', 'blockquote', 
        // 'ol', 'ul', 'hr', 'left', 'right', 'center', 'justify', 'a', 'image', 'forecolor', 'backcolor', 'removeFormat'
        actions : [
            'b' , 'i' , 'u' , 'strike' , 'ul' , 'ol' ,
            {
                name : 'copy' , // required
                icon : '<b>C</b>' , // string or html string (ex. <svg>...</svg>)
                title : 'Copy' ,
                result : ( ) => {
                    // copy current selection or whole editor content
                    const selection = window . getSelection ( ) ;
                    if ( ! selection . toString ( ) . length ) {
                        const range = document . createRange ( ) ;
                        range . selectNodeContents ( editor . refs . editor ) ;
                        selection . removeAllRanges ( ) ;
                        selection . addRange ( range ) ;
                    }
                    editor . exec ( 'copy' ) ;
                }
            } ,
            'h1' , 'h2' , 'p'
        ] ,
        // default 300px
        height : '300px' ,
        // initial html
        html : '' ,
        // remove format action clears formatting, but also removes some html tags.
        // you can specify which tags you want to be removed.
        removeFormatTags : [ 'h1' , 'h2' , 'blackquote' ] // default
    }
} )

API

 // Methods
editor . exec ( cmd : string , value ?: string ) // execute document command (document.executeCommand(cmd, false, value))
editor . getHtml ( sanitize ?: boolean ) // returns html string from editor. if passed true as argument, html will be sanitized before return
editor . getText ( ) // returns text string from editor
editor . setHtml ( html : string , sanitize ?: boolean ) // sets html for editor. if second argument is true, html will be sanitized
editor . saveRange ( ) // saves current editor cursor position or user selection
editor . restoreRange ( ) // restores cursor position or user selection
// saveRange and restoreRange are useful when making custom actions
// that demands that focus is shifted from editor to, for example, modal window.

• Untuk daftar perintah EXEC yang tersedia, kunjungi https://codepen.io/netsi1964/pen/qbllg

 // Events
editor . $on ( 'change' , ( event ) => console . log ( event ) ) // on every keyup event
editor . $on ( 'blur' , ( event ) => console . log ( event ) ) // on editor blur event 

 // Props
editor . refs . < editor | raw | modal | colorPicker > // references to editor, raw (textarea), modal and colorPicker HTMLElements 

Tindakan

actions Prop mencantumkan tindakan yang telah ditentukan sebelumnya (dan/atau menambahkan tindakan baru) untuk ditampilkan di toolbar. Jika prop tidak ditetapkan, semua actions ditentukan dan diekspor dalam tindakan. JS disediakan, dalam urutan di mana mereka didefinisikan. Untuk membatasi atau mengubah urutan tindakan yang telah ditentukan yang ditunjukkan, atur dengan memberikan serangkaian nama tindakan yang ditentukan, misalnya:

 actions = { [ "b" , "i" , "u" , "h2" , "ul" , "left" , "center" , "justify" , "forecolor" ] }

Editor mencari untuk melihat apakah nama sudah ditentukan, dan menambahkannya ke bilah alat jika ada.

Anda dapat menambahkan tindakan khusus dengan memasukkannya ke dalam array, seperti bagaimana "salin" didefinisikan dalam contoh di atas. Lihatlah actions.js untuk lebih banyak contoh.

Penggunaan di Svelte

Lebih mudah untuk mengimpor dan bekerja langsung dari sumber jika Anda menggunakan SVELTE. Anda dapat menangani acara change melalui on:change .

 < script >
  import Editor from "cl-editor/src/Editor.svelte"

  let html = ' < h3 > hello </ h3 > '
  let editor

</ script >

{ @ html html }
< Editor { html } on : change = { ( evt ) => html = evt . detail } />

Contoh Menyesuaikan Palet Picker Warna

 < script >
  import Editor from "cl-editor/src/Editor.svelte"

  let html = ' < h3 > hello </ h3 > '
  let colors = ['#000000', '#e60000', '#ff9900', '#ffff00', '#008a00', '#0066cc', '#9933ff',
        '#ffffff', '#facccc', '#ffebcc', '#ffffcc', '#cce8cc', '#cce0f5', '#ebd6ff',
        '#bbbbbb', '#f06666', '#ffc266', '#ffff66', '#66b966', '#66a3e0', '#c285ff',
        '#888888', '#a10000', '#b26b00', '#b2b200', '#006100', '#0047b2', '#6b24b2',
        '#444444', '#5c0000', '#663d00', '#666600', '#003700', '#002966', '#3d1466']
  let editor

</ script >

{ @ html html }
< Editor { html } { colors } on : change = { ( evt ) => html = evt . detail } />

Untuk membatasi atau mendefinisikan alat yang ditunjukkan di bilah alat, lulus dalam actions prop.

Untuk dengan mudah mendapatkan elemen DOM konten editor, lulus prop contentId , misalnya. contentId='notes-content' .

Ini berguna jika Anda ingin mendengarkan ubah ukuran editor dan meresponsnya.

Untuk melakukannya, pertama -tama aktifkan mengubah ukuran pada editor:

. cl-content {
  resize : both;
}

Sekarang amati mengubah ukuran:

 < script >
  const ro = new ResizeObserver(entries = > {
    const contentWd = entries [ 0 ] . contentRect . width
    // respond to contentWd ...
  } )
  let editor
  $: editor && ro . observe ( document . getElementById ( 'notes-content' ) )
< / script>

< Editor { ... otherEditorCfgs } contentId = 'notes-content' bind : this = { editor } />

Jalankan demo

git clone https://github.com/nenadpnc/cl-text-editor.git cl-editor
cd cl-editor
npm i
npm run dev

Referensi

Perpustakaan ini terinspirasi oleh repo open source ini:

• Alex-D/Trumbowyg
• Jaredreich/Pell

Lisensi

Lisensi MIT