cl editor
v2.3.0
Construit avec Svelte (pas de dépendances externes)
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 L'application actions répertorie les actions prédéfinies (et / ou ajoute de nouvelles actions) à afficher dans la barre d'outils. Si l'hélice n'est pas définie, toutes actions définies et exportées en action.js sont mises à disposition, dans l'ordre dans lequel ils sont définis. Pour limiter ou modifier l'ordre des actions prédéfinies indiquées, définissez-la en passant un tableau de noms des actions définies, par exemple:
actions = { [ "b" , "i" , "u" , "h2" , "ul" , "left" , "center" , "justify" , "forecolor" ] }L'éditeur regarde pour voir si le nom est déjà défini et l'ajoute à la barre d'outils si c'est le cas.
Vous pouvez ajouter une action personnalisée en l'insérant dans le tableau, comme la façon dont "Copy" est défini dans l'exemple ci-dessus. Jetez un œil à actions.js pour plus d'exemples.
Il est plus facile d'importer et de travailler directement à partir de la source si vous utilisez Svelte. Vous pouvez gérer les événements change via 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 } /> Pour limiter ou définir les outils indiqués dans la barre d'outils, passez dans une accessoire actions .
Pour obtenir facilement l'élément de contenu de l'éditeur DOM, passez un accessoire contentId , par exemple. contentId='notes-content' .
Ceci est utile si vous souhaitez écouter le redimensionnement de l'éditeur et répondre en conséquence.
Pour ce faire, activez d'abord le redimensionnement sur l'éditeur:
. cl-content {
resize : both;
}Observez maintenant le redimensionnement:
< 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 devCette bibliothèque est inspirée par ces reposs open source:
Licence MIT
