一、簡(jiǎn)介

CKEditor5是一種適用于現(xiàn)代瀏覽器的Web富文本編輯器，它是CKEditor的新版本。CKEditor5提供了更現(xiàn)代化的架構(gòu)以及一個(gè)全新的插件化API來使得插件的開發(fā)、使用更加自由和方便。下面將從用戶體驗(yàn)、API、插件三方面深入解析它的文檔。

二、用戶體驗(yàn)

CKEditor5在用戶體驗(yàn)和編輯功能上都有了很大的改進(jìn)。其優(yōu)點(diǎn)有：

1. 現(xiàn)代化的界面：CKEditor5 的設(shè)計(jì)語言是 Material Design。這使得它的界面看起來更現(xiàn)代化，也更加符合當(dāng)今 Web 上的設(shè)計(jì)趨勢(shì)。

2. 響應(yīng)更快：CKEditor5 采用了更加現(xiàn)代化的技術(shù)棧 —— ES6、Webpack、React、Redux 等等，這使得它的響應(yīng)速度得到了大大的提升。

3. 更現(xiàn)代化的編輯方式：CKEditor5將文檔流和分段段落的概念相結(jié)合，使得富文本編輯更加自然，同時(shí)，為了高可用性，也支持了純文本編輯器。

三、API

CKEditor5的API中很多部分都借鑒了React和Redux的設(shè)計(jì)哲學(xué)，更加具有現(xiàn)代化的特征。下面介紹一下CKEditor5的API：

1. 進(jìn)入編輯區(qū)

        
        const editor = document.querySelector( '.editor' );

        ClassicEditor
            .create( editor )
            .then( ... )
            .catch( ... );
        
    

這符合了現(xiàn)代化的按需加載的設(shè)計(jì)，當(dāng)我們需要使用CKEditor5的時(shí)候，將JS才動(dòng)態(tài)插入到頁面中，從而減少網(wǎng)頁的初始加載時(shí)間。

2. 編輯器實(shí)例的使用

        
        ClassicEditor
        .create( document.querySelector( '#editor' ), {
            toolbar: [ 'heading', '|', 'bold', 'italic', 'link' ]
        } )
        .then( editor => {
            console.log( editor );
        } )
        .catch( error => {
            console.error( error );
        } );
        
    

編輯器具有強(qiáng)大的功能，我們可以針對(duì)這些功能進(jìn)行自定義配置，并在使用時(shí)進(jìn)行靈活調(diào)用。

3. 包含 DOM 更新監(jiān)聽的編輯器

        
        import { editor } from '@ckeditor/ckeditor5-core';

        const canvasEditor = editor({
        canvas: document.createElement('canvas')
        });
        canvasEditor.model.document.on('change', (evt, data) => {
        console.log(data, data.writer.getPlainText());
        })
        
    

CKEditor5提供了很好的DOM節(jié)點(diǎn)更新響應(yīng)機(jī)制，當(dāng)我們需要監(jiān)聽節(jié)點(diǎn)變更時(shí)，可以使用這樣的代碼進(jìn)行監(jiān)聽。

四、插件

CKEditor5 之所以更加強(qiáng)大，其插件化機(jī)制功不可沒。CKEditor5 的插件可以被 Redux store 式的機(jī)制所應(yīng)用，這讓插件的開發(fā)變得更加容易和靈活。CKEditor5 自帶了很多插件，我們也可以開發(fā)自己的插件。下面是一個(gè)自定義的插件的代碼示例：

    
    import Plugin from '@ckeditor/ckeditor5-core/src/plugin';

    export default class ImageCaptionEditing extends Plugin {
    static get requires() {
        return [ ImageCaption, ImageCaptionEditingUI ];
    }

    init() {
        const editor = this.editor;

        editor.editing.mapper.on( 'viewToModelPosition', ( viewToModelPositionEvent, data ) => {
          if ( data.viewPosition.parent.name === 'image' && data.viewPosition.name === 'caption' ) {
            viewToModelPositionEvent.preventDefault();

            editor.editing.view.scrollToTheElement( data.viewPosition.parent );
            editor.model.focusPosition = editor.model.document.selection.getFirstPosition();
          }
        } );
      }
    }
    

五、總結(jié)

以上是對(duì)CKEditor5中文文檔的探討和介紹。CKEditor5設(shè)計(jì)現(xiàn)代化的界面、響應(yīng)更加快速，在API和插件上也有了很大的改進(jìn)。同時(shí)，它的文檔也相對(duì)完善，對(duì)初學(xué)者和資深用戶都有很好的幫助和學(xué)習(xí)價(jià)值。我們希望在以后的 Web 開發(fā)中能夠更加高效地利用這個(gè)好用的工具。