在vue中使用了ckeditor5后，收到如下圖的反饋：

起初以為是小問題，像其他富文本一樣加幾個屬性參數就有了，但是我發現我錯了，錯的離譜。那些參數加上去沒有任何效果，后來查找下才知道是要下載插件。

以下分為兩部分，第一部分為引入并使用插件，第二部分為CKEditor -duplicate -modules報錯的解決方案，根據自身情況查看。

下載插件并引用

因為我引入的方式是在vue頁面中加入該代碼引用

import ClassicEditor from '@givebest/ckeditor5-custom-build'

在node_modules找到該文件夾 —— @givebest/ckeditor5-custom-build，并進入

安裝所需要的富文本插件，此處以下劃線按鈕為例：

npm i // 安裝其他依賴 npm i @ckeditor/ckeditor5-basic-styles // 安裝下劃線等工具依賴

修改文件 node_modules@givebest\ckeditor5-custom-build\src\ckeditor.js，引入安裝的插件

/*** @license Copyright (c) 2014-2021, CKSource - Frederico Knabben. All rights reserved.* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license*/ import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor.js'; import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat.js'; import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote.js'; import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold.js'; import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials.js'; import Heading from '@ckeditor/ckeditor5-heading/src/heading.js'; import Image from '@ckeditor/ckeditor5-image/src/image.js'; import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption.js'; import ImageInsert from '@ckeditor/ckeditor5-image/src/imageinsert.js'; import ImageResize from '@ckeditor/ckeditor5-image/src/imageresize.js'; import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle.js'; import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar.js'; import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload.js'; import Indent from '@ckeditor/ckeditor5-indent/src/indent.js'; import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic.js'; import Link from '@ckeditor/ckeditor5-link/src/link.js'; import List from '@ckeditor/ckeditor5-list/src/list.js'; import MediaEmbed from '@ckeditor/ckeditor5-media-embed/src/mediaembed.js'; import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph.js'; import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice.js'; import SimpleUploadAdapter from '@ckeditor/ckeditor5-upload/src/adapters/simpleuploadadapter.js'; import Table from '@ckeditor/ckeditor5-table/src/table.js'; import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar.js'; import TextTransformation from '@ckeditor/ckeditor5-typing/src/texttransformation.js';import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment.js'; // <--- ADDEDclass Editor extends ClassicEditor {}// Plugins to include in the build. Editor.builtinPlugins = [Autoformat,BlockQuote,Bold,Essentials,Heading,Image,ImageCaption,ImageInsert,ImageResize,ImageStyle,ImageToolbar,ImageUpload,Indent,Italic,Link,List,MediaEmbed,Paragraph,PasteFromOffice,SimpleUploadAdapter,Table,TableToolbar,TextTransformation,Alignment // <--- ADDED ];export default Editor;

然后，執行構建的命令，目的是vue使用的并不是這個文件，而且build/ckeditor.js （該文件已經壓縮）

npm run build

最后，在Vue組件中，添加對應的屬性，代碼如下(以下代碼已剔除非必要部分)

<template> <!-- 已在main.js全局引入 --><ckeditor:editor="editor"v-model="formData.content":config="editorConfig"@input="onEditorInput"></ckeditor> </template><script>import ClassicEditor from '@givebest/ckeditor5-custom-build'import '@givebest/ckeditor5-custom-build/build/translations/zh-cn.js'export default {data() {return {editor: ClassicEditor,editorConfig: {toolbar: {items: ['heading','|','bold','italic','underline', // <--- ADDED'link','bulletedList','numberedList','|','outdent','indent','|','blockQuote','insertTable','mediaEmbed','undo','redo','imageInsert',],},language: 'zh-cn',image: {toolbar: ['imageTextAlternative','imageStyle:inline','imageStyle:block','imageStyle:side',],},table: {contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells'],}},}}} </script>

以上便完成了基本的插件引入并使用；但是坑還沒結束，當我在引入Alignment（對齊）的插件時，報錯了！！！

CKEditor -duplicate -modules報錯處理

官網文檔說明
簡單說就是：當由于 CKEditor 5 的安裝或初始化方式錯誤而引發此錯誤時，它的某些模塊被重復（評估并執行了兩次），模塊重復而導致的錯誤。

解決方案：
其實網上方法有很多，拉下源碼重新編譯再替換等等，大同小異，我試過都行不通還是報錯，因此認真的查看官網，找解決的途徑 —— 最終找到這段話，如下：
官網方案要點

具體操作意思就是：在 node_modules@givebest\ckeditor5-custom-build中將需要安裝的插件包，確保都是一個版本或最新版本（@ckeditor/ckeditor5-dev-*除外），才能保證不會報錯。因此，我將他們全部打包為最新版本，成功解決，版本如下。

總結

以上是生活随笔為你收集整理的【原创】vue中使用CKEditor5引入插件ckeditor-duplicated-modules报错处理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。