CKEditor5正确添加插件的方法

CKEditor5添加插件错误ckeditor-duplicated-modules

本来想在CKEditor 5的ckeditor5-build-classic添加一个Code Block插件，按官方文档，先安装@ckeditor/ckeditor5-code-block

npm install --save @ckeditor/ckeditor5-code-block

然后再代码中引入使用：

import CodeBlock from '@ckeditor/ckeditor5-code-block/src/codeblock';
ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ CodeBlock, ... ],
        toolbar: [ 'codeBlock', ... ]
    } )
    .then( ... )
    .catch( ... );

原来的代码上是引入了经典版：

import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';

编译通过，然后运行起来，结果报错：

core.js:6210 ERROR Error: Uncaught (in promise): CKEditorError: ckeditor-duplicated-modules
Read more: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-ckeditor-duplicated-modules
CKEditorError: ckeditor-duplicated-modules
Read more: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-ckeditor-duplicated-modules
at Object.<anonymous> (ckeditor.js:5)
at Object.push.DX+Y (ckeditor.js:5)
at i (ckeditor.js:5)
at Module.<anonymous> (ckeditor.js:5)
at i (ckeditor.js:5)
at push.DX+Y (ckeditor.js:5)
at ckeditor.js:5
at ckeditor.js:5
at Object.DX+Y (ckeditor.js:5)
at __webpack_require__ (bootstrap:84)
at resolvePromise (zone-evergreen.js:798)
at resolvePromise (zone-evergreen.js:750)
at zone-evergreen.js:860
at ZoneDelegate.invokeTask (zone-evergreen.js:399)
at Object.onInvokeTask (core.js:28578)
at ZoneDelegate.invokeTask (zone-evergreen.js:398)
at Zone.runTask (zone-evergreen.js:167)
at drainMicroTaskQueue (zone-evergreen.js:569)

这个错误大概意思是ckeditor导入了重复的模块。根据error-ckeditor-duplicated-modules说明，@ckeditor/ckeditor5-build-classic和@ckeditor/ckeditor5-code-block/src/codeblock这两个导入，导致了某些组件重复。也就是这两个模块依赖了相同的组件。这样使用是不正确的导入姿态。

官方提供了添加插件的说明，分为两种情况：

• 在官方的build上添加插件
• 直接从源码构建添加插件

添加插件环境要求

添加插件的环境要求：

• Node.js 12.0.0+
• npm 5.7.1+

CKEditor5 在官方的build上添加插件

比如我们要在 classic editor build上添加Code Block插件，按以下几个步骤来添加插件：

1. 从Git仓库上clone ckeditor的源码。
2. 安装要使用的插件包，这里是Code Block。
3. 在build的src/ckeditor.js，配置插件。
4. 重新构建

从Git仓库上clone ckeditor的源码

从Git仓库克隆代码，这里使用的是classic editor build作为基础，所以克隆后，进入ckeditor5-build-classic目录，并执行安装

git clone -b stable https://github.com/ckeditor/ckeditor5
cd ckeditor5/packages/ckeditor5-build-classic
npm install

安装Code Block插件包

npm install --save-dev @ckeditor/ckeditor5-code-block

在build的src/ckeditor.js，配置插件

需要注意，此处的目录还是ckeditor5/packages/ckeditor5-build-classic，在此目录的src/ckeditor.js，添加配置：

// The editor creator to use.
import ClassicEditorBase from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import UploadAdapter from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter';
import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote';
import EasyImage from '@ckeditor/ckeditor5-easy-image/src/easyimage';
import Heading from '@ckeditor/ckeditor5-heading/src/heading';
import Image from '@ckeditor/ckeditor5-image/src/image';
import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption';
import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle';
import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar';
import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload';
import Link from '@ckeditor/ckeditor5-link/src/link';
import List from '@ckeditor/ckeditor5-list/src/list';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import CodeBlock from '@ckeditor/ckeditor5-code-block/src/codeblock';;     // <--- 此处为添加
export default class ClassicEditor extends ClassicEditorBase {}
// Plugins to include in the build.
ClassicEditor.builtinPlugins = [
    Essentials,
    UploadAdapter,
    Autoformat,
    Bold,
    Italic,
    BlockQuote,
    EasyImage,
    Heading,
    Image,
    ImageCaption,
    ImageStyle,
    ImageToolbar,
    ImageUpload,
    Link,
    List,
    Paragraph,
    CodeBlock                                                           // <--- 此处为新增
];
// Editor configuration.
ClassicEditor.defaultConfig = {
    toolbar: {
        items: [
            'heading',
            '|',
            'codeBlock',                                                 // <--- 此处为新增
            'bold',
            'italic',
            'link',
            'bulletedList',
            'numberedList',
            'uploadImage',
            'blockQuote',
            'undo',
            'redo'
        ]
    },
    image: {
        toolbar: [
            'imageStyle:inline',
            'imageStyle:block',
            'imageStyle:side',
            '|',
            'toggleImageCaption',
            'imageTextAlternative'
        ]
    },
    // This value must be kept in sync with the language defined in webpack.config.js.
    language: 'en'
};

重新构建代码

最后重新构建代码

yarn run build

如果没有安装yarn，可以使用node安装：

npm install -g yarn

至此，会在ckeditor5/packages/ckeditor5-build-classic的build目录下重新生成ckeditor.js。新生成的ckeditor.js就是一个基于classic版添加了插件的代码。

可以在浏览器中打开 sample/index.html 文件，查看插件是否安装正确。