Vue中引入配置CKEditor5

1. 配置 vue.config.js

1.1 安装依赖项

npm install --save \
    @ckeditor/ckeditor5-vue \
    @ckeditor/ckeditor5-dev-webpack-plugin \
    @ckeditor/ckeditor5-dev-utils \
    postcss-loader@3 \
    raw-loader@0.5.1

1.2 配置vue.config.js文件

const path = require( 'path' );
const CKEditorWebpackPlugin = require( '@ckeditor/ckeditor5-dev-webpack-plugin' );
const { styles } = require( '@ckeditor/ckeditor5-dev-utils' );

module.exports = {
    // The source of CKEditor is encapsulated in ES6 modules. By default, the code
    // from the node_modules directory is not transpiled, so you must explicitly tell
    // the CLI tools to transpile JavaScript files in all ckeditor5-* modules.
    transpileDependencies: [
        /ckeditor5-[^/\\]+[/\\]src[/\\].+\.js$/,
    ],

    configureWebpack: {
        plugins: [
            // CKEditor needs its own plugin to be built using webpack.
            new CKEditorWebpackPlugin( {
                // See https://ckeditor.com/docs/ckeditor5/latest/features/ui-language.html
                language: 'zh-cn' // 中文语言包
            } )
        ]
    },

    // Vue CLI would normally use its own loader to load .svg and .css files, however:
    //	1. The icons used by CKEditor must be loaded using raw-loader,
    //	2. The CSS used by CKEditor must be transpiled using PostCSS to load properly.
    chainWebpack: config => {
        // (1.) To handle editor icons, get the default rule for *.svg files first:
        const svgRule = config.module.rule( 'svg' );

        // Then you can either:
        //
        // * clear all loaders for existing 'svg' rule:
        //
        //		svgRule.uses.clear();
        //
        // * or exclude ckeditor directory from node_modules:
        svgRule.exclude.add( path.join( __dirname, 'node_modules', '@ckeditor' ) );

        // Add an entry for *.svg files belonging to CKEditor. You can either:
        //
        // * modify the existing 'svg' rule:
        //
        //		svgRule.use( 'raw-loader' ).loader( 'raw-loader' );
        //
        // * or add a new one:
        config.module
            .rule( 'cke-svg' )
            .test( /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/ )
            .use( 'raw-loader' )
            .loader( 'raw-loader' );

        // (2.) Transpile the .css files imported by the editor using PostCSS.
        // Make sure only the CSS belonging to ckeditor5-* packages is processed this way.
        config.module
            .rule( 'cke-css' )
            .test( /ckeditor5-[^/\\]+[/\\].+\.css$/ )
            .use( 'postcss-loader' )
            .loader( 'postcss-loader' )
            .tap( () => {
                return styles.getPostCssConfig( {
                    themeImporter: {
                        themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' ),
                    },
                    minify: true
                } );
            } );
    }

2. 配置编辑器（以Classic editor为例）

2.1 安装依赖项

npm install --save \
    @ckeditor/ckeditor5-editor-classic \
    @ckeditor/ckeditor5-essentials \
    @ckeditor/ckeditor5-basic-styles \
    @ckeditor/ckeditor5-link \
    @ckeditor/ckeditor5-paragraph \
    @ckeditor/ckeditor5-theme-lark

2.2 在相关组件中引入CKEditor组件

<template>
  <div id="myEditor">
    <ckeditor id="article-editor" v-model="editorData" :editor="editor":config="editorConfig"/>
  </div>
</template>

2.4 按需导入并个性化配置编辑器

<script>
import Vue from "vue";
import CKEditor from "@ckeditor/ckeditor5-vue";
Vue.use(CKEditor);
import ClassicEditor from "@ckeditor/ckeditor5-editor-classic/src/classiceditor";
import FileRpository from "@ckeditor/ckeditor5-upload/src/filerepository";
// 必须配置Essentials，否则编辑器无法输入
import Essentials from "@ckeditor/ckeditor5-essentials/src/essentials";
import UploadAdapter from "@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter";
import Alignment from "@ckeditor/ckeditor5-alignment/src/alignment";
import Autoformat from "@ckeditor/ckeditor5-autoformat/src/autoformat"
import Bold from "@ckeditor/ckeditor5-basic-styles/src/bold"
import Base64UploadAdapter from "@ckeditor/ckeditor5-upload/src/adapters/base64uploadadapter";
import Italic from "@ckeditor/ckeditor5-basic-styles/src/italic";
import Underline from "@ckeditor/ckeditor5-basic-styles/src/underline";
import Strikethrough from "@ckeditor/ckeditor5-basic-styles/src/strikethrough";
import CKFinder from "@ckeditor/ckeditor5-ckfinder/src/ckfinder";
import Code from "@ckeditor/ckeditor5-basic-styles/src/code";
import CodeBlock from "@ckeditor/ckeditor5-code-block/src/codeblock";
import Font from "@ckeditor/ckeditor5-font/src/font";
import Subscript from "@ckeditor/ckeditor5-basic-styles/src/subscript";
import Superscript from "@ckeditor/ckeditor5-basic-styles/src/superscript";
import Highlight from "@ckeditor/ckeditor5-highlight/src/highlight";
import Heading from "@ckeditor/ckeditor5-heading/src/heading";
import HorizontalLine from "@ckeditor/ckeditor5-horizontal-line/src/horizontalline";
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 ImageResize from "@ckeditor/ckeditor5-image/src/imageresize";
import EasyImage from "@ckeditor/ckeditor5-easy-image/src/easyimage";
import Indent from "@ckeditor/ckeditor5-indent/src/indent";
import Link from "@ckeditor/ckeditor5-link/src/link";
import IndentBlock from "@ckeditor/ckeditor5-indent/src/indentblock";
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 PageBreak from "@ckeditor/ckeditor5-page-break/src/pagebreak";
import PasteFromOffice from "@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice";
import { MyUploadAdapter } from "@/nzk/utils/MyUploadAdapterPlugin";
import Title from "@ckeditor/ckeditor5-heading/src/title";
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 TodoList from "@ckeditor/ckeditor5-list/src/todolist";
import BlockToolbar from "@ckeditor/ckeditor5-ui/src/toolbar/block/blocktoolbar";
import HeadingButtonsUI from "@ckeditor/ckeditor5-heading/src/headingbuttonsui";
import ParagraphButtonUI from "@ckeditor/ckeditor5-paragraph/src/paragraphbuttonui";

export default {
  name: "MyEditor",
  data() {
    return {
      editor: ClassicEditor,
      editorData: "在这里输入或粘贴内容",
      editorConfig: {
        plugins: [
          Alignment,
          Highlight,
          Essentials,
          UploadAdapter,
          Autoformat,
          Bold,
          Base64UploadAdapter,
          Italic,
          Underline,
          Strikethrough,
          Code,
          CodeBlock,
          Font,
          Subscript,
          Superscript,
          CKFinder,
          Heading,
          HorizontalLine,
          EasyImage,
          Image,
          ImageCaption,
          ImageStyle,
          ImageToolbar,
          ImageUpload,
          ImageResize,
          Indent,
          IndentBlock,
          Link,
          List,
          MediaEmbed,
          Paragraph,
          PasteFromOffice,
          FileRpository,
          Table,
          TableToolbar,
          TextTransformation,
          TodoList,
          BlockToolbar,
          ParagraphButtonUI,
          HeadingButtonsUI,
          PageBreak
        ],
        toolbar: {
          items: [
            "alignment",
            "Highlight",
            "fontSize",
            "fontFamily",
            "fontColor",
            "fontBackgroundColor",
            "pageBreak",
            "heading",
            "|",
            "bold",
            "italic",
            "underline",
            "strikethrough",
            "code",
            "codeBlock",
            "subscript",
            "superscript",
            "link",
            "todoList",
            "bulletedList",
            "numberedList",
            "horizontalLine",
            "indent",
            "outdent",
            "|",
            "ckfinder",
            "imageUpload",
            "insertTable",
            "mediaEmbed",
            "undo",
            "redo"
          ]
        },
        image: {
          toolbar: [
            "imageStyle:full",
            "imageStyle:side",
            "|",
            "imageTextAlternative"
          ]
        },
        table: {
          contentToolbar: ["tableColumn", "tableRow", "mergeTableCells"]
        },
        blockToolbar: [
          "paragraph",
          "heading1",
          "heading2",
          "heading3",
          "|",
          "bulletedList",
          "numberedList",
          "|",
          "imageUpload"
        ],
        cloudServices: {},
        ckfinder: {
          uploadUrl: "",
          options: {
            resourceType: "Images"
          }
        },
        mediaEmbed: {},
      }
    };
  },
}
</script>

注：编辑器个性化配置文档

注：参考链接（侵删）