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

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

$ 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

$ npm publish

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