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

如何解决插件不适用于 Vue 组件中的多个 CKEditor4 实例

我为我的网站使用 CKEditor 4 创建了一个用于富文本编辑的 Vue 组件。当这个组件第一次挂载时，编辑器和所有默认插件都可以正常工作，但是当同一组件的另一个实例在同一页面上动态挂载时，涉及弹出对话框的 Table、Image 等插件会做不起作用（我无法在对话框中输入任何文本输入，例如表列和行）。官方 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: ",};
</script>

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

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

解决方法

Vue 需要一个键来区分同一组件的不同实例。你会在 v-for 中做同样的事情。 我认为您不需要执行初始化/销毁过程，而只需将所需的属性绑定到编辑器，并为注入该组件的父级提供一个键。

,

原来是一个jQuery对话框干扰了CKEditor的对话框。一旦编辑器被放置在对话框之外，只要没有其他 jQuery 对话框在同一窗口/选项卡上打开，插件就会工作。