Vue CKEditor5 自定义编辑器（插件安装使用流程）

一、简介

• Vue CKEditor5 快速了解并使用，以及 官方使用插件案例。

• CKEditor5 自定义编辑器的流程：下载官方的源码，然后找到符合要求的基础编辑器包，对它进行修改，安装支持插件等，调整完成之后，对这个编辑器包进行重新打包，就得到了自定义编辑器，可以直接丢入项目或者放到 npm 中去使用。

二、自定义编辑器

• 下载官方源码，注意：推荐使用 stable 分支。

  sh $ git clone -b stable https://github.com/ckeditor/ckeditor5-build-classic.git

• 下载完成后 packages 中就是基础编辑器包，随便选个(例如：经典编辑器 ckeditor5-build-classic)，这个包就是官网 Demo 中的经典编辑器 classic。

  

• 打开 ckeditor5-build-classic 项目，运行 $ npm install 安装依赖，通过 $ npm run build 生成 build 文件夹，build 文件夹中就是打包好的编辑器，通过导入项目使用即可，项目中有 index.html 文件已经引用并实现编辑器，所以调整打包之后，直接访问 index.html 就能看到效果。

  

• 以 @ckeditor/ckeditor5-alignment 插件举例，经典编辑器默认是不支持 alignment 内容居中排版样式的

  $ npm install --save-dev @ckeditor/ckeditor5-alignment

• 安装好插件之后，直接使用。(注意只需要看 // <--- 新加的插件 的位置)

  ```js /**

  • @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  • For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */

  // 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 CKBox from '@ckeditor/ckeditor5-ckbox/src/ckbox'; import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder'; 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 Indent from '@ckeditor/ckeditor5-indent/src/indent'; import Link from '@ckeditor/ckeditor5-link/src/link'; import List from '@ckeditor/ckeditor5-list/src/list'; import MediaEmbed from '@ckeditor/ckeditor5-media-embed/src/mediaembed'; import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph'; import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice'; import PictureEditing from '@ckeditor/ckeditor5-image/src/pictureediting'; import Table from '@ckeditor/ckeditor5-table/src/table'; import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar'; import TextTransformation from '@ckeditor/ckeditor5-typing/src/texttransformation'; import CloudServices from '@ckeditor/ckeditor5-cloud-services/src/cloudservices';

  import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment'; // <--- 新加的插件

  export default class ClassicEditor extends ClassicEditorBase {}

  // Plugins to include in the build. ClassicEditor.builtinPlugins = [ Essentials, UploadAdapter, Autoformat, Bold, Italic, BlockQuote, CKBox, CKFinder, CloudServices, EasyImage, Heading, Image, ImageCaption, ImageStyle, ImageToolbar, ImageUpload, Indent, Link, List, MediaEmbed, Paragraph, PasteFromOffice, PictureEditing, Table, TableToolbar, TextTransformation, Alignment // <--- 新加的插件 ];

  // Editor configuration. ClassicEditor.defaultConfig = { toolbar: { items: [ 'heading', '|', 'alignment', // <--- 新加的插件 'bold', 'italic', 'link', 'bulletedList', 'numberedList', '|', 'outdent', 'indent', '|', 'uploadImage', 'blockQuote', 'insertTable', 'mediaEmbed', 'undo', 'redo' ] }, image: { toolbar: [ 'imageStyle:inline', 'imageStyle:block', 'imageStyle:side', '|', 'toggleImageCaption', 'imageTextAlternative' ] }, table: { contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ] }, // This value must be kept in sync with the language defined in webpack.config.js. language: 'en' }; ```

• 调整好之后，进行打包

  sh $ npm run build 或 $ yarn run build

• 然后打开 sample/index.html 进行预览效果，插件就支持成功了，如果需要更多的插件，就一直安装支持打包使用就行了。

  

三、发布到 NPM 进行使用(这个可选，也可以直接使用)

• 通过 npm 上传发布自定义组件以及使用详细流程 新建一个 npm 项目

• 然后将上面打包得到的 build 文件夹中的文件拖入 npm 项目中

  

• 然后配置入口文件

  

• 然后执行发布命令，发布成功后，可以在 npm 个人中心看到

  $ npm publish

  

• 然后到项目中去使用，以 vue 项目举例，到项目中安装自定义编辑器 dzm-editor

  $ npm install dzm-editor

• 案例代码，跟使用官方的编辑器一样的使用，也就是导入路径管换了下，还可以支持自定义上传图片等功能封装在里面。

  ```html

  ```