cl editor

محرر نص خفيف الوزن

بنيت مع سفلت (لا تبعيات خارجية)

حجم الملف (تشمل الحزمة CSS و HTML و JS)

• دقيقة: 30 كيلو بايت
• GZIP: 10 كيلو بايت

تثبيت

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 الدعامة الإجراءات المحددة مسبقًا (و/أو تضيف إجراءات جديدة) ليتم عرضها في شريط الأدوات. إذا لم يتم تعيين الدعامة ، فسيتم توفير جميع actions المحددة وتصديرها. للحد من أو تغيير ترتيب الإجراءات المحددة مسبقًا ، قم بتعيينه عن طريق تمرير مجموعة من أسماء الإجراءات المحددة ، على سبيل المثال:

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

يبحث المحرر لأعلى لمعرفة ما إذا كان الاسم محدد بالفعل ، ويضيفه إلى شريط الأدوات إذا كان كذلك.

يمكنك إضافة إجراء مخصص عن طريق إدخاله في الصفيف ، مثل كيفية تعريف "النسخ" في المثال أعلاه. ألقِ نظرة على actions.js لمزيد من الأمثلة.

الاستخدام في سفلت

من الأسهل الاستيراد والعمل مباشرة من المصدر إذا كنت تستخدم 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 Content Content Content بسهولة ، تمرير 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/Trombowyg
• جاردريتش/بيل

رخصة

رخصة معهد ماساتشوستس للتكنولوجيا