cl editor

ตัวแก้ไขข้อความที่มีน้ำหนักเบา

สร้างด้วย svelte (ไม่มีการพึ่งพาภายนอก)

ขนาดไฟล์ (ชุดรวม 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 

การกระทำ

Prop actions แสดงรายการการกระทำที่กำหนดไว้ล่วงหน้า (และ/หรือเพิ่มการกระทำใหม่) เพื่อแสดงในแถบเครื่องมือ หากไม่ได้ตั้งค่าเสา actions ทั้งหมดที่กำหนดและส่งออกในการดำเนินการ js จะมีให้ในลำดับที่พวกเขากำหนดไว้ หากต้องการ จำกัด หรือเปลี่ยนลำดับของการกระทำที่กำหนดไว้ล่วงหน้าให้ตั้งค่าโดยผ่านอาร์เรย์ของชื่อของการกระทำที่กำหนดเช่น:

 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

เพื่อให้ได้องค์ประกอบ DOM เนื้อหาตัวแก้ไขได้อย่างง่ายดายให้ผ่าน prop 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

การอ้างอิง

ห้องสมุดนี้ได้รับแรงบันดาลใจจาก repos โอเพนซอร์สเหล่านี้:

• Alex-D/Trumbowyg
• Jaredreich/Pell

ใบอนุญาต

ใบอนุญาต MIT