vue.js 从源代码使用 CKEditor，V 模型未按预期工作

Question

当我从源代码使用 CKEditor 创建 vue 项目时，我可以为 CKEditor 添加插件。但是编辑器组件 V-model 没有按预期工作。 ClassicEditor 无法编辑并且没有数据 update.it 是错误吗？

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')

Answer 1

测试后发现EssentialsPlugin必须是import

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>

vue.js 从源代码使用 CKEditor，V 模型未按预期工作

vue.js using CKEditor from source, V-model not working as expected

vue.js

ckeditor