Saturday 27 August 2022

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?



from Vue 3 CKEditor 5 Add Plugins CodeBlock Error Duplicate Module

No comments:

Post a Comment