cl editor

Легкий текстовый редактор

Построен с стрте (без внешних зависимостей)

Размер файла (комплект включает в себя CSS, HTML и JS)

• Мин: 30 КБ
• Gzip: 10 КБ

Установка

NPM:

npm install --save cl-editor

HTML:

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

Использование

 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.

• Для списка доступных команд EXECS посетите 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 

Действия

Опции actions перечисляют предопределенные действия (и/или добавляют новые действия), которые будут показаны на панели инструментов. Если опора не установлена, все actions определяются и экспортируются в Actions.js доступны, в том порядке, в котором они определены. Чтобы ограничить или изменить порядок полученных показанных действий, установите его, передавая массив имен определенных действий, например:

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

Редактор смотрит вверх, чтобы увидеть, определена ли имя, и добавляет его на панель инструментов, если оно есть.

Вы можете добавить пользовательское действие, вставив его в массив, например, как «копия» определено в примере выше. Взгляните на actions.js для получения дополнительных примеров.

Использование в стройке

Легче импортировать и работать непосредственно из источника, если вы используете Svelte. Вы можете справиться с событиями change через 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 } />

Пример настройки палитры сбора цветов

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

Чтобы ограничить или определить инструменты, показанные на панели инструментов, пройдите в actions .

Чтобы легко получить элемент Dom Content Editor, передайте contentId Prop, например. contentId='notes-content' .

Это полезно, если вы хотите послушать изменение размера редактора и ответить соответственно.

Для этого сначала включите изменение размера в редакторе:

. cl-content {
  resize : both;
}

Теперь наблюдайте за изменением размера:

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

Запустить демонстрацию

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

Ссылки

Эта библиотека вдохновлена этими репо с открытым исходным кодом:

• Alex-D/Trumbowyg
• Джаредрейх/Пелл

Лицензия

MIT Лицензия