[CKEditor]vue.js 版本从源代码构建 CKEditor 时,v-model 和标签无法正常工作

package.json

"@ckeditor/ckeditor5-vue": "^1.0.1",
"@ckeditor/ckeditor5-editor-classic": "^21.0.0",

 

editor.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>请输入内容</p>",
            editorConfig: {},
        };
    },
};
</script>
请先 登录 后评论

最佳答案 2020-09-15 09:36

经过测试,我找到了 EssentialsPlugin 插件必须被引入。

否则你会发现 CKeditor 的输入框是不能输入富文本的,代码如下。

 

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>
请先 登录 后评论

其它 0 个回答

  • 1 关注
  • 0 收藏,61 浏览
  • 噢嚯 提出于 2020-09-15 09:30

相似问题