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 소품에는 도구 모음에 표시 될 사전 정의 된 조치 (및/또는 새로운 조치를 추가)를 나열합니다. 소품이 설정되지 않은 경우 ACTION.JS가 정의 된 순서대로 정의 및 내보내는 모든 actions 사용할 수 있습니다. 표시된 사전 정의 된 작업의 순서를 제한하거나 변경하려면 정의 된 작업의 이름을 전달하여 설정하십시오.
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 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이 라이브러리는이 오픈 소스 리포지토리에서 영감을 얻었습니다.
MIT 라이센스
