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

起初以為是小問題，像其他富文本一樣加幾個(gè)屬性參數(shù)就有了，但是我發(fā)現(xiàn)我錯(cuò)了，錯(cuò)的離譜。那些參數(shù)加上去沒有任何效果，后來(lái)查找下才知道是要下載插件。

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

下載插件并引用

因?yàn)槲乙氲姆绞绞窃趘ue頁(yè)面中加入該代碼引用

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

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

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

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;

然后，執(zhí)行構(gòu)建的命令，目的是vue使用的并不是這個(gè)文件，而且build/ckeditor.js （該文件已經(jīng)壓縮）

npm run build

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

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

以上便完成了基本的插件引入并使用；但是坑還沒結(jié)束，當(dāng)我在引入Alignment（對(duì)齊）的插件時(shí)，報(bào)錯(cuò)了！！！

CKEditor -duplicate -modules報(bào)錯(cuò)處理

官網(wǎng)文檔說(shuō)明
簡(jiǎn)單說(shuō)就是：當(dāng)由于 CKEditor 5 的安裝或初始化方式錯(cuò)誤而引發(fā)此錯(cuò)誤時(shí)，它的某些模塊被重復(fù)（評(píng)估并執(zhí)行了兩次），模塊重復(fù)而導(dǎo)致的錯(cuò)誤。

解決方案：
其實(shí)網(wǎng)上方法有很多，拉下源碼重新編譯再替換等等，大同小異，我試過都行不通還是報(bào)錯(cuò)，因此認(rèn)真的查看官網(wǎng)，找解決的途徑 —— 最終找到這段話，如下：
官網(wǎng)方案要點(diǎn)

具體操作意思就是：在 node_modules@givebest\ckeditor5-custom-build中將需要安裝的插件包，確保都是一個(gè)版本或最新版本（@ckeditor/ckeditor5-dev-*除外），才能保證不會(huì)報(bào)錯(cuò)。因此，我將他們?nèi)看虬鼮樽钚掳姹?#xff0c;成功解決，版本如下。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。