cl editor
v2.3.0
Svelteで構築された（外部依存関係なし）
npm install --save cl-editor < 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
}
} ) // 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. // 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が定義およびaction.jsでエクスポートされ、それらが定義されている順序で利用可能になります。表示されている事前定義されたアクションの順序を制限または変更するには、定義されたアクションの名前を配置して設定します。
actions = { [ "b" , "i" , "u" , "h2" , "ul" , "left" , "center" , "justify" , "forecolor" ] }編集者は、名前が既に定義されているかどうかを確認するために見上げ、もしそうならツールバーに追加します。
上記の例で「コピー」がどのように定義されているかなど、アレイに挿入してカスタムアクションを追加できます。より多くの例については、 actions.jsをご覧ください。
Svelteを使用している場合は、ソースから直接インポートして作業する方が簡単です。 on:change経由で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要素を簡単に取得するには、 contentIdプロップを渡します。 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このライブラリは、これらのオープンソースリポジトリに触発されています。
MITライセンス
