javascript - Vue 3 CKEditor 5 添加插件 CodeBlock 错误重复模块

Question

我正在尝试在我的编辑器中添加 CodeBlock 插件，这是我的组件

<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>

但是编译时我收到错误 CKEditorError: ckeditor-duplicated-modules。我已阅读文档，但几乎所有指南都不是 vue 3 风格，我无法很好地理解它。 短期来看，如何添加这个插件取决于我的编码风格？

Answer 1

构建包包含一个已使用 webpack 编译的文件。这意味着它包含所有必要的代码。

但是，CodeBlock 插件还从这些包中导入一些模块。如果您要求 webpack 构建这样的项目，您最终将包含(并执行)模块两次 - 首先，因为它们包含在构建包中，第二次，因为 CodeBlock 需要它们。

您需要创建自己的构建，您可以通过文档找到执行此操作的过程，可在此处访问:https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/installing-plugins.html

但是 CKEditor 预见到了这一点，并提供了一个在线构建器，可以为您完成工作并使其变得简单(您选择您的选项和插件)。您可以在这里找到它:

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

然后，您只需将导入内容替换为使用官方构建器创建的导入内容即可。