从源使用CKEditor的vue.js，V模型无法按预期工作

问题描述

当我从源代码使用CKEditor创建vue项目时，可以为CKEditor添加插件。但是编辑器组件的V模型无法按预期工作。 ClassicEditor无法编辑，也没有数据更新。这是一个错误吗？

vue.config.js

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

module.exports = {
    transpileDependencies: [/ckeditor5-[^/\\]+[/\\]src[/\\].+\.js$/],configureWebpack: {
        plugins: [
            new CKEditorWebpackPlugin({
                language: 'zh-cn',translationsOutputFile: /app/,}),],},chainWebpack: (config) => {
        const svgRule = config.module.rule('svg')

        svgRule.exclude.add(path.join(__dirname,'node_modules','@ckeditor'))

        config.module
            .rule('cke-svg')
            .test(/ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/)
            .use('raw-loader')
            .loader('raw-loader')

        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,})
            })
    },css: {
        loaderOptions: {
            less: {
                lessOptions: {
                    modifyVars: {
                        'primary-color': '#fecf44','danger-color': '#1890ff','link-color': '#1890ff',javascriptEnabled: true,}

package.json

{
    "name": "dev.note.editor","version": "0.1.0","private": true,"scripts": {
        "serve": "vue-cli-service serve","build": "vue-cli-service build"
    },"dependencies": {
        "@ckeditor/ckeditor5-alignment": "^21.0.0","@ckeditor/ckeditor5-autoformat": "^21.0.0","@ckeditor/ckeditor5-basic-styles": "^21.0.0","@ckeditor/ckeditor5-block-quote": "^21.0.0","@ckeditor/ckeditor5-build-classic": "^21.0.0","@ckeditor/ckeditor5-ckfinder": "^21.0.0","@ckeditor/ckeditor5-code-block": "^21.0.0","@ckeditor/ckeditor5-dev-utils": "^23.2.0","@ckeditor/ckeditor5-dev-webpack-plugin": "^23.2.0","@ckeditor/ckeditor5-editor-classic": "^21.0.0","@ckeditor/ckeditor5-editor-decoupled": "^21.0.0","@ckeditor/ckeditor5-essentials": "^21.0.0","@ckeditor/ckeditor5-export-pdf": "^1.0.0","@ckeditor/ckeditor5-export-word": "^0.0.2","@ckeditor/ckeditor5-font": "^21.0.0","@ckeditor/ckeditor5-heading": "^21.0.0","@ckeditor/ckeditor5-highlight": "^21.0.0","@ckeditor/ckeditor5-horizontal-line": "^21.0.0","@ckeditor/ckeditor5-image": "^21.0.0","@ckeditor/ckeditor5-indent": "^21.0.0","@ckeditor/ckeditor5-link": "^21.0.0","@ckeditor/ckeditor5-list": "^21.0.0","@ckeditor/ckeditor5-media-embed": "^21.0.0","@ckeditor/ckeditor5-mention": "^21.0.0","@ckeditor/ckeditor5-page-break": "^21.0.0","@ckeditor/ckeditor5-paragraph": "^21.0.0","@ckeditor/ckeditor5-paste-from-office": "^21.0.0","@ckeditor/ckeditor5-remove-format": "^21.0.0","@ckeditor/ckeditor5-restricted-editing": "^21.0.0","@ckeditor/ckeditor5-special-characters": "^21.0.0","@ckeditor/ckeditor5-table": "^21.0.0","@ckeditor/ckeditor5-theme-lark": "^21.0.0","@ckeditor/ckeditor5-upload": "^21.0.0","@ckeditor/ckeditor5-vue": "^1.0.1","@ckeditor/ckeditor5-watchdog": "^21.0.0","@ckeditor/ckeditor5-word-count": "^21.0.0","@wiris/mathtype-ckeditor5": "^7.22.0","ant-design-vue": "^1.6.4","axios": "^0.19.2","core-js": "^3.6.5","js-cookie": "^2.2.1","postcss-loader": "3","raw-loader": "0.5.1","vue": "^2.6.11","vue-router": "^3.2.0","vuex": "^3.4.0"
    },"devDependencies": {
        "@vue/cli-plugin-babel": "~4.5.0","@vue/cli-plugin-router": "~4.5.0","@vue/cli-plugin-vuex": "~4.5.0","@vue/cli-service": "~4.5.0","less-loader": "^6.2.0","vue-template-compiler": "^2.6.11"
    }
}

App.vue

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

<script>
import ClassicEditor from "@ckeditor/ckeditor5-editor-classic/src/classiceditor";

export default {
    data() {
        return {
            editor: ClassicEditor,editorData: "<p>Content of the editor.</p>",editorConfig: {},};
    },};
</script>

main.js

import Vue from 'vue'
import CKEditor from '@ckeditor/ckeditor5-vue'
import App from './App.vue'
import router from './router'
import store from './store'

import '@/assets/less/style.less'

Vue.config.productionTip = false

Vue.use(CKEditor)

new Vue({
    router,store,render: (h) => h(App),}).$mount('#app')

解决方法

经过测试，我发现必须导入EssentialsPlugin。

App.vue

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

<script>
import CKEditor from "@ckeditor/ckeditor5-vue";
import ClassicEditor from "@ckeditor/ckeditor5-editor-classic/src/classiceditor";

import Heading from "@ckeditor/ckeditor5-heading/src/heading";
import Autoformat from "@Îckeditor/ckeditor5-autoformat/src/autoformat";
// Must be import
import EssentialsPlugin from "@ckeditor/ckeditor5-essentials/src/essentials";

export default {
    components: {
        ckeditor: CKEditor.component,},data() {
        return {
            demo: "",editor: ClassicEditor,editorData: "<p>Content of the editor.</p>",editorConfig: {
                plugins: [Heading,Autoformat,EssentialsPlugin],toolbar: {
                    items: ["heading"],title: {
                    placeholder: "My custom placeholder for the title",placeholder: "My custom placeholder for the body",};
    },};
</script>

ckeditor vue.js