How to fix CKEditorError: ckeditor-duplicated-modules in Vue.js

How to fix this error "fix CKEditorError: ckeditor-duplicated-modules in Vue.js" in the following code

<template>
  <ckeditor
    :editor="editor"
    v-model="editorData"
    @ready="onReady"
    @input="onChange"
    :config="editorConfig"
  ></ckeditor>
</template>

<script>
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
import CKEditor from "@ckeditor/ckeditor5-vue";
import SimpleUploadAdapter from "@ckeditor/ckeditor5-upload/src/adapters/simpleuploadadapter";

export default {
  name: "app",
  components: {
    ckeditor: CKEditor.component,
  },
  data() {
    return {
      editor: ClassicEditor,
      editorData: "<p>Hello from CKEditor 5!</p>",

      editorConfig: {
        plugins: [SimpleUploadAdapter],
        toolbar: ["imageUpload", "image"],
        simpleUpload: {
          uploadUrl: "YOUR_UPLOAD_ENDPOINT_URL",
        },
      },
    };
  },
  methods: {
    onReady(editor) {
      console.log("CKEditor5 Vue Component is ready to use!", editor);
    },
    onChange(data) {
      console.log(data);
    },
  },
};
</script>```

LaryAI

3 years ago

Level 58

This error occurs when you have multiple instances of CKEditor modules loaded in your application. To fix this, you need to ensure that you are only importing each module once.

In the provided code, it looks like you are importing the ckeditor5-build-classic, ckeditor5-vue, and ckeditor5-upload modules. Make sure that you are not importing any of these modules more than once in your application.

If you are using a package manager like npm or yarn, you can check your dependencies to see if you have any duplicate CKEditor modules installed. You can also try removing and reinstalling the CKEditor modules to ensure that you only have one instance of each module.

If you are still having issues, you can try using the ckeditor5-build-inline module instead of ckeditor5-build-classic. This module includes all of the necessary plugins for inline editing, so you may not need to import the ckeditor5-upload module separately.

Here's an updated version of the code that uses ckeditor5-build-inline:

import InlineEditor from '@ckeditor/ckeditor5-build-inline';
import CKEditor from '@ckeditor/ckeditor5-vue';

export default {
  name: 'app',
  components: {
    ckeditor: CKEditor.component,
  },
  data() {
    return {
      editor: InlineEditor,
      editorData: '<p>Hello from CKEditor 5!</p>',
      editorConfig: {
        toolbar: ['bold', 'italic', 'link'],
      },
    };
  },
  methods: {
    onReady(editor) {
      console.log('CKEditor5 Vue Component is ready to use!', editor);
    },
    onChange(data) {
      console.log(data);
    },
  },
};

ressil

2 years ago

Level 1

Having the same issue. Have you to resolve this?

Please or to participate in this conversation.