富文本編輯器-CKeditor5

時間 2019-11-17

標籤文本編輯器 ckeditor5 ckeditor 简体版

原文原文鏈接

1.基本api

docs.ckeditor.com/ckeditor5/l…javascript

2.初步實現

1.官網下載ckeditor.js，而後在html內引入
複製代碼

html內容html

<textarea class="ckeditor ck-heading_paragraph'" name="description" id="editor"/> <!---->
        <p>文本內容</p>
    </textarea>
複製代碼

js部分基礎的建立了ckeditorjava

ClassicEditor
            .create( document.querySelector( '#editor' ),{
                
            }).then( editor => { //成功 這裏面會有一個editor對象，會有各類方法，我寫一些用到過的方法
            editor.model.change( writer => {
                        editor.setData('<p>ckeditor</p>');                                             //初始化富文本框，裏面存字符串
                        editor.getData();                                                              //獲取編輯框內的內容，傳給後端
                        writer.insertText( '666', editor.model.document.selection.getFirstPosition() );//在文本光標處插入"666"字符
                    } );
                
            }).catch( error => { //失敗
                console.error( error );
            } );
複製代碼