After developing a Vue component for rich text editing with CKEditor 4 on my website, I encountered an issue. When the component is first mounted, everything works perfectly including all default plugins. However, if another instance of the same component is dynamically mounted on the same page, certain plugins like Table and Image, which require a popup dialog, stop functioning properly. I am unable to input any text in the dialog boxes, such as Table Columns and Rows. This problem persists with both my custom implementation and the official ckeditor4-vue package. I even tried using the general package instead of the Vue-specific one, but that did not resolve the issue.
<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>
To replicate this issue, the component can be imported into another component and a second instance of the same component can be dynamically added using v-if. In the second dynamically created instance, the mentioned plugins will not function correctly.
EDIT I attempted changing from v-if to v-show to see if initializing both instances simultaneously would solve the problem, but it did not. Even with both editor instances present on a basic HTML page, the plugins still do not work as expected.