插件不适用于 Vue 组件中的多个 CKEditor4 实例

Question

我已经使用 CKEditor 4 为我的网站创建了一个用于富文本编辑的 Vue 组件。首次挂载此组件时，编辑器和所有默认插件都可以正常工作，但当同一组件的另一个实例动态挂载到同一页面时，Table、Image 等插件会涉及弹出对话框不起作用（我无法在对话框中输入任何文本输入，例如 Table 列和行）。官方的 ckeditor4-vue 包也存在同样的问题。我试图通过使用通用包 (zip) 而不是 vue 特定包来解决问题，但这没有帮助。这是我的代码。

<template>
    <div>
        <textarea v-bind:id="fieldName" v-bind:name="fieldName" v-model="content"></textarea>
    </div>
</template>

<script>
    import './config';
    import './ckeditor/ckeditor';
    export default {
        props: {
            currentContent: {
                type: String,
                default: null,
            },
            fieldName: {
                type: String,
                default: 'content',
            },
            toolbarType: {
                type: String,
                default: 'Full',
            },
        },
        data: function () {
            return {
                editorConfig: {
                    toolbar_Full: null,
                    toolbar: this.toolbarType,
                },
                editor: null,
                content: null,
                initialized: false,
                siteUrl: siteUrl,
            };
        },
        mounted: function () {
            let vm = this;
            vm.initializeTextarea();
        },
        beforeDestroy: function () {
            let vm = this;
            vm.destroyTextarea();
        },
        methods: {
            initializeTextarea: function () {
                let vm = this;
                var editorConfig = JSON.parse(JSON.stringify(vm.editorConfig));
                vm.editor = CKEDITOR.replace(vm.fieldName, editorConfig);
                console.log("After Initialize: CKEditor Instances: ",CKEDITOR.instances);
            },
            destroyTextarea: function () {
                let vm = this;
                CKEDITOR.instances[vm.fieldName].destroy();
                console.log("After Destroy: CKEditor Instances: ",CKEDITOR.instances);
            },
        },
    };
</script>

要重现该问题，可以将组件导入另一个组件，并使用 v-if 动态添加同一组件的第二个实例，上述插件在第二个（动态创建）中无法正常工作实例.

编辑我尝试将 v-if 更改为 v-show 以检查如果同时初始化两者是否有效，但这也无济于事。即使两个编辑器实例都出现在一个简单的 HTML 页面上，插件也不起作用。

Answer 1

Vue 需要一个键来区分同一组件的不同实例。您将在 v-for 中执行相同的操作。我认为您不需要执行该 initialize/destroy 过程，而只需将所需的属性绑定到编辑器并为注入此组件的父项提供密钥。

Answer 2

结果是 jQuery 对话框干扰了 CKEditor 的对话框。一旦编辑器被放置在对话框之外，只要在同一 window/tab.

上没有打开其他 jQuery 对话框，插件就会工作

插件不适用于 Vue 组件中的多个 CKEditor4 实例

Plugins don't work with multiple instances of CKEditor4 in Vue Components

javascript

ckeditor

vue.js

ckeditor4.x