cl editor

Leichter Texteditor

Gebaut mit Folge (keine externen Abhängigkeiten)

Dateigröße (Bundle enthält CSS, HTML und JS)

• min: 30 kb
• gzip: 10 kb

Installation

NPM:

npm install --save cl-editor

HTML:

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

Verwendung

 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.

• Für die Liste des verfügbaren Exec -Befehls finden Sie unter https://codepen.io/Netsi1964/ten/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 

Aktionen

In den actions prop listet vordefinierte Aktionen auf (und/oder neue Aktionen hinzu), die in der Symbolleiste angezeigt werden sollen. Wenn die Prop nicht festgelegt ist, werden alle in Aktionen definierten und exportierten actions in der Reihenfolge zur Definition zur Verfügung gestellt. Um die Reihenfolge der angegebenen vordefinierten Aktionen einzuschränken oder zu ändern, setzen Sie sie durch die Übergabe eines Arrays von Namen der definierten Aktionen, z. B.::

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

Der Editor schaut auf, um festzustellen, ob der Name bereits definiert ist, und fügt ihn der Symbolleiste hinzu, wenn dies der Fall ist.

Sie können eine benutzerdefinierte Aktion hinzufügen, indem Sie sie in das Array einfügen, z. B. in der obigen Beispiele "Kopie". Schauen Sie sich actions.js für weitere Beispiele.

Nutzung in Sufle

Es ist einfacher, aus der Quelle direkt aus der Quelle zu importieren und zu arbeiten, wenn Sie Svelte verwenden. Sie können change über on:change umgehen.

 < 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 } />

Beispiel für die Anpassung der Farbpicker -Palette

 < 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 } />

Um die in der Symbolleiste gezeigten Tools einzuschränken oder zu definieren, geben Sie eine actions -Requisite ein.

Um das DOM -Element von Editor Content einfach zu erhalten, geben Sie eine contentId Prop, z. contentId='notes-content' .

Dies ist nützlich, wenn Sie die Größe des Editors anhören und entsprechend antworten möchten.

Aktivieren Sie dazu zunächst die Größe des Editors ändern:

. cl-content {
  resize : both;
}

Beobachten Sie nun die Größenänderung:

 < 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 } />

Demo laufen

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

Referenzen

Diese Bibliothek ist von diesen Open -Source -Repos inspiriert:

• Alex-D/Trumbowyg
• Jaredreich/Pell

Lizenz

MIT -Lizenz