cl editor

轻巧的文本编辑器

用苗条建造（没有外部依赖关系）

文件大小（捆绑包包括CSS，HTML和JS）

• 最低：30kb
• GZIP：10KB

安装

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.

• 有关可用exec的列表，请访问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 prop列出了预定义的操作（和/或添加新操作）要在工具栏中显示。如果未设置道具，则在操作中定义和导出的所有actions 。要限制或更改显示的预定措施的顺序，请通过传递定义的动作名称的数组来设置它，例如：

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

编辑器抬头看是否已经定义了名称，并在工具栏中添加到该名称。

您可以通过将其插入数组中添加自定义操作，例如上面示例中“复制”的方式。查看actions.js以获取更多示例。

在Svelte中使用

如果您使用的是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道具。

要轻松获取编辑器内容元素元素，请传递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
• Jaredreich/Pell

执照

麻省理工学院许可证