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 文件,查看插件是否安装正确。
 

版权声明:著作权归作者所有。

相关推荐

RecyclerView添加点击事件监听器

实现RecyclerView.OnItemTouchListener的项目触摸监听器:import android.content.Context; import android.support.v7.widget.RecyclerView; import android.view.GestureDetector; import android.view.M

Ubuntu 16.04安装nginx的正确方式

Nginx预编译包提供了两种版本的安装:stable(稳定版)和mainline(主线版)。stable版本Nginx的安装1、添加nginx的签名密钥Ubuntu需要验证nginx的仓库签名,为了避免安装nginx出现缺失PGP key的警告,有必要把nginx包和仓库的签名密钥添加到apt的密钥环。下载nginx包和仓库的签名密钥:wget http://nginx.org/keys/ngin

IntelliJ IDEA Community社区版集成添加Tomcat插件(Smart Tomcat)

IntelliJ IDEA Community社区版是一个简版,是没有集成Tomcat的。我们可以通过插件的方式把tomcat的环境集成到IDEA社区版中,其中插件可以是smart tomcat。一、进入插件管理界面File -> Settings -> Plugins 二、在插件界面的搜索框里输入“Tomcat”,选择Smart Tomcat 安装。安装成

Shell脚本正确获取Git当前所在分支的方法

看到一些博文提到获取shell脚本获取git当前分支使用了git branch,类似的方法如下:#!/bin/bash function git.branch { br=`git branch | grep "*"` echo ${br/* /} }实际上,这是一种错误的方法。原因如下:$ git branch * master next $ git checkout master^0

Linux向文件末尾追加内容的几种方法

在Linux,有几种方法可以用来向文件的末尾追加内容。方法一、双大于号>>结合cat把一个文件的内容追加到另外一个文件的末尾:cat 1.txt >> 2.txt结合echo向文件的末尾追加内容:echo "hello" >> 2.txt注意:双大于号">>"表示内容追加,但大于号">"则是覆盖目标文件的内容。方法二、使用命令tee -atee

Maven添加Sonar插件配置

在 Maven 本地库中的 settings.xml 配置文件中的节点中添加如下配置(也可以配在pom.xml里):添加以下profile<profiles> <profile> <id>sonar</id> <activation> <activeByDefault>true</

从jar包读取资源文件的正确方法

Java的类加载器ClassLoader提供了两个方法,用来对ClassPath里资源读取:getResource和getResourceAsStreamgetResourcepublic URL getResource(String name)访问资源的访问URL。需要注意的是,在IDEA开发工具里和打包成jar包,两个路径的形式是不一样的。IDEA开发工具结果在IDEA开发工具里,返回的是资源