error-ckeditor-duplicated-modules 在vue中引入ckeditor插件报错

报错原因：由于集成了webpack，统一引入了ckeditor ，但是页面里面我们又通过import引入了一遍，所以导致引入重复了

解决：

ckeditor本身除了基本的一些功能，其他基本全靠插件引入，所以想加功能必定是需要引入插件配置，可以换个目录，也可以换引入方式，最后我考虑到依赖项如果在项目里面大量引入这个插件，本身不太好管理，第二是感觉页面引入多了，也不好看，其实我们可以重新打包一下这个ckeditor，将我们需要的东西集成进去，再引入项目，这就比较简单。

1，个性化配置地址

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

可以按照步骤配置，依次如图：
注: 他有些是需要收费的，加完有提示
在这里插入图片描述
然后直接下载，下载完后解压，就得到一个项目，大体目录如图

下载依赖

npm install

打包项目

npm run build

打包完成后，在build下就有我们需要的文件，直接放在项目的public,通过index.html引入即可
在这里插入图片描述

<template><div><ckeditor :editor="editor" :value="editorData" :disabled="disabled" :config="editorConfig" @ready="onEditorReady" @focus="onEditorFocus" @blur="onEditorBlur" @input="onEditorInput" @destroy="onEditorDestroy"></ckeditor></div>
</template><script>export default {name: 'app',props: {editorData: {           // 初始默认值type: String,default: '',},// editorConfig: {         // 编译器配置//   type: Object,//   default: () => {//   },// },disabled: {             // 是否只读type: Boolean,default: false,},},data() {return {editor: ClassicEditor,editorConfig: {simpleUpload: {uploadUrl: 'http://example.com',headers: {}},toolbar: {items: ['heading','highlight','|','bold','italic','Underline','fontSize','numberedList','bulletedList','blockQuote','|','alignment:left','alignment:right','alignment:center','alignment:justify','|','imageUpload','Link','|','undo', //撤销'redo',//重做],shouldNotGroupWhenFull: true}}};},methods: {// 初始化onEditorReady() {console.log(ClassicEditor)console.log('初始化')},// 聚焦onEditorFocus() {console.log('聚焦')},// 失去焦点onEditorBlur() {console.log('失去焦点')},// 输入onEditorInput() {console.log('输入')},// 页面卸载onEditorDestroy() {console.log('卸载')}},
}
</script>