CODEWITHSUNDEEP
javascriptvue.jsckeditorvuejs3ckeditor5
Matius Nugroho Aryanto
Matius Nugroho Aryanto

Reputation: 901

Vue 3 CKEditor 5 Add Plugins CodeBlock Error Duplicate Module

I am trying to add CodeBlock plugin tu my editor, here is my component

<script setup>
    import { ref, reactive } from 'vue'
    import CKEditor from '@ckeditor/ckeditor5-vue'
    import ClassicEditor from '@ckeditor/ckeditor5-build-classic'
    import CodeBlock from '@ckeditor/ckeditor5-code-block/src/codeblock'

    const editor = ClassicEditor
    const ckeditor = CKEditor.component
    const editorConfig = {plugins :[CodeBlock]}
    const data = reactive({
        title :"judulnya",
        content:'<b>Isi Post ni bos</b>'
    })
    const submitPost = ()=>{
        let form = {...data}
        console.log(form)
    }
</script>
<template>
   <div class="container-fluid p-0">

        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <form @submit.prevent="submitPost">
                            <div class="mb-3">
                                <input type="text" v-model="data.title" class="form-control">
                            </div>
                            <div class="mb-3">
                                <ckeditor :config="editorConfig" :editor="editor" v-model="data.content"></ckeditor>
                            </div>
                            <button type="submit" class="btn btn-primary">Post</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div> 
</template>
<style>
.ck-editor__editable {min-height: 50vh;}
</style>

but when compiled i got error CKEditorError: ckeditor-duplicated-modules. I have read the documentation but almost all of the guidance is not in vue 3 style and i can't understand it well. In short term, how to add this plugin depends on my coding style?

Upvotes: 2

Views: 1445

Answers (2)

May W.
May W.

Reputation: 327

I stuck in this issue for two days

the online builder saved my ass

just read this part of doc: https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/frameworks/vuejs-v3.html#integrating-a-build-from-the-online-builder

  1. download your custom build from online builder
  2. put it on the root of project folder, named 'ckeditor5' or whatever you like
  3. yarn add file:./ckeditor5
  4. wait for installing......
  5. in my .vue file
import Editor from 'ckeditor5-custom-build/build/ckeditor';

<template>
  <ckeditor
    :editor="Editor"
    :modelValue="editorData"
    :editorConfig="editorConfig"
    @input="handleInput"
  >
 </ckeditor>
</template>

enter image description here yay, no more install & import plugin!!!!

Upvotes: 1

fchancel
fchancel

Reputation: 2699

The build package contains a file that is already compiled with webpack. This means that it contains all the necessary code.

However, the CodeBlock plugin also imports some of the modules from these packages. If you ask webpack to build such a project, you will end up with the modules included (and executed) twice - first, because they are included in the build package, and second, because they are required by CodeBlock.

You would need to create your own build, you can find the procedure to do this through the documentation, accessible here: https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/installing-plugins.html

However CKEditor has foreseen this and offers an online builder that does the work for you and makes it easy (you choose your options and plugins). You can find it here:

https://ckeditor.com/ckeditor-5/online-builder/

And then, you just have to replace your imports by the one created with the official builder.

Upvotes: 2

Related Questions