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