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

卡尔特斯

已于 2022-07-12 16:38:51 修改

阅读量5.7k

点赞数 5

分类专栏： CKEditor 文章标签： vue.js 编辑器 javascript

于 2022-07-12 10:01:35 首次发布

本文链接：https://blog.csdn.net/zz00008888/article/details/125737119

版权

VueCKEditor5 CKEditor5 自定义编辑器插件集成 npm发布

关键词由CSDN通过智能技术生成

CKEditor 专栏收录该内容

4 篇文章

订阅专栏

一、简介

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

二、自定义编辑器

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

$ 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
```

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

/**
 * @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'
};

调整好之后，进行打包
```
$ npm run build
或
$ yarn run build
```
然后打开 sample/index.html 进行预览效果，插件就支持成功了，如果需要更多的插件，就一直安装支持打包使用就行了。

三、发布到 `NPM` 进行使用（这个可选，也可以直接使用）

通过 npm 上传发布自定义组件以及使用详细流程新建一个 npm 项目
然后将上面打包得到的 build 文件夹中的文件拖入 npm 项目中
然后配置入口文件
然后执行发布命令，发布成功后，可以在 npm 个人中心看到
```
$ npm publish
```
然后到项目中去使用，以 vue 项目举例，到项目中安装自定义编辑器 dzm-editor
```
$ npm install dzm-editor
```

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

<template>
  <!-- ckeditor 父元素 -->
  <div class="editor-view">
    <!-- 编辑器 -->
    <ckeditor :editor="editor" v-model="editorData" :config="editorConfig" @ready="onReady"></ckeditor>
  </div>
</template>

<script>
// 经典编辑器（$ npm install --save @ckeditor/ckeditor5-build-classic）
// import Editor from '@ckeditor/ckeditor5-build-classic'
// 中文包（语言包都在 build 版本中，注意 ckeditor5-build-xxx，xxx 需要替换为安装的编辑器包路径)
// import '@ckeditor/ckeditor5-build-classic/build/translations/zh-cn'

// 使用别人自定义的编辑器
import Editor from 'dzm-editor'
// 中文包
import 'dzm-editor/translations/zh-cn'

export default {
  data () {
    return {
      // 编辑器对象
      editor: Editor,
      // 编辑内容
      editorData: '<p>Content of the editor</p>',
      // 编辑器配置
      editorConfig: {
        // 配置语言
        language: 'zh-cn'
        // 功能栏
        // toolbar: {
        //   items: ['Bold', 'Italic', 'Link' ...]
        // }
        // 更多的配置....
      }
    }
  },
  methods: {
    onReady (editor) {
      // 获得编辑器对象...
    }
  }
}
</script>