CKEditor In Vue3 - CKEditorError: ckeditor-duplicated-modules Error

[rg225]

Here I am trying to use the CK Editor in vue3, my goal is to add the HTML Support

I installed the ckeditor by following document

npm install --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-classic

npm install --save @ckeditor/ckeditor5-html-support

and added it as plugin but it's giving error

code which I written

<ckeditor :editor="editor" :disabled="editorDisabled" v-model="editorData" :config="editorConfig" @input="handlerChange"></ckeditor>

import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
import { GeneralHtmlSupport } from "@ckeditor/ckeditor5-html-support";
export default {
    data() {
        return {
            editor: ClassicEditor,
            editorData: "<p>Content of the editor.gg</p>",
            editorDisabled: false,
            editorConfig: {
                plugin: [GeneralHtmlSupport],
                toolbar: ["heading", "fontFamily", "sourceEditing", "|", "bold", "|", "italic", "link", "bulletedList", "numberedList", "blockQuote"],
                heading: {
                    options: [
                        { model: "paragraph", title: "Paragraph", class: "ck-heading_paragraph" },
                        { model: "heading1", view: "h1", title: "Heading 1", class: "ck-heading_heading1" },
                        { model: "heading2", view: "h2", title: "Heading 2", class: "ck-heading_heading2" },
                        { model: "heading3", view: "h3", title: "Heading 3", class: "ck-heading_heading3" }
                    ]
                },
                fontFamily: {
                    options: ["default", "Ubuntu, Arial, sans-serif", "Ubuntu Mono, Courier New, Courier, monospace"]
                },
                allowedContent: true,
                htmlSupport: {
                    allow: [
                        {
                            name: /.*/,
                            attributes: true,
                            classes: true,
                            styles: true
                        }
                    ]
                }
            },
            style: {},
            toolbar: "custom",
            content: "",
            code: ""
        };
    },

and other methods...

Pcakge.json

"dependencies": {
        "@babel/eslint-parser": "^7.17.0",
        "@ckeditor/ckeditor5-build-classic": "^40.1.0",
        "@ckeditor/ckeditor5-html-support": "^40.1.0",
        "@ckeditor/ckeditor5-source-editing": "^40.1.0",
        "@ckeditor/ckeditor5-vue": "^5.1.0",
        "@vueup/vue-quill": "^1.1.1",
        "axios": "^0.26.0",
        "codemirror": "^5.65.16",
        "codemirror-editor-vue3": "^2.4.1",
        "core-js": "^3.21.1",
        "quill-image-drop-module": "^1.0.3",
        "quill-image-resize-module": "^3.0.0",
        "quill-image-uploader": "^1.3.0",
        "vue": "^3.2.31",
        "vue-final-modal": "^3.4.3",
        "vue-router": "^4.0.12",
        "vuex": "^4.0.2",
        "zip-webpack-plugin": "^4.0.1"
    },

I want to enable the feature through which I can see the html shource code, directly I can paste that code.

I saw one one help link which says version should be same for all @ckeditor which is already 40.1.0, so don't know what to do.

[Witoso]

You're trying to extend a predefined build (@ckeditor/ckeditor5-build-classic), and it's not possible. If you want to add additional plugins, you need to prepare a custom build.

[CKEditorBot]

There has been no activity on this issue for the past year. We've marked it as stale and will close it in 30 days. We understand it may still be relevant, so if you're interested in the solution, leave a comment or reaction under this issue.

[CKEditorBot]

We've closed your issue due to inactivity. We understand that the issue may still be relevant. If so, feel free to open a new one (and link this issue to it).