【Vue3】vue3使用CXEditor编辑器&Uncaught CKEditorError: ckeditor-duplicated-modules
vue3使用CXEditor编辑器&Uncaught CKEditorError: ckeditor-duplicated-modules
CXEditor用前须知
- Uncaught CKEditorError: ckeditor-duplicated-modules 如下图↓
- 这个错误可能插件使用的方法不对，很简单就可以解决
- 解决方法 → 点击我跳转到解决方法
- 注： 不推荐直接跳转到解决方法，跟着我步骤稳妥点。
-
CXEditor ：CXEditor官网
-
注意：务必按照俺的步骤，按照官网步骤十有八九都会跳坑里。
-
注意：我用的Vue3是基于Vite构建
- 目录↓
一、安装vue3与ckeditor5
1、基于Vite安装Vue3
npm init vue@latest
2、npm下载ckeditor5-build-classic和ckeditor5-vue ↓
- CXEditor有多种版本，具体官网查看，我这里使用的是ckeditor5-build-classic
npm install --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-classic
3、在main.js引入ckeditor5-vue
- mian.js 引入并use ↓
main.js
import { createApp } from 'vue'
import App from './App.vue'
import CKEditor from '@ckeditor/ckeditor5-vue';
createApp(App).use(CKEditor).mount('#app')
4、App.vue使用CkEditor↓
App.vue
5、运行 npm run dev
- 如图，基本功能已经出来了 ↓
- 但这么点功能哪够用啊，都不够我自个塞牙缝，继续给它多加点功能。
二、CXEditor添加插件
注意：
- CXEditor添加插件必须在app.use(CKEditor)之前完成。也就是说，CXEditor添加插件与Vue3里使用CXEditor是2回事，不然会报这个错 Uncaught CKEditorError: ckeditor-duplicated-modules
- 大概意思就是，CXEditor已经加载过了，不能再重复加载。（个人理解）
- 注： 跟着我操作可避免这个错误 ↓
添加插件与解决报错问题
1、 克隆官网的CXEditor5
-
克隆的这个CXEditor5是专门安装插件与自定义插件用的，与vue3里的CXEditor5没有联系 ↓
-
命令
git clone -b stable https://github.com/ckeditor/ckeditor5
cd ckeditor5/packages/ckeditor5-build-classic
注： cd的路径别搞错了。
注：
- 克隆的时间有点长，趁克隆的段时间我们继续往下看 ↓
- 注： 克隆完成后运行会报错，请跟着我的步骤，下面我会讲解克隆完成后的注意事项与build插件。
2、 在线打包CXEditor5
- 先去官网打包CXEditor5。
- 在线打包CXEditor
- 备用地址：https://ckeditor.com/ckeditor-5/online-builder/
- CXEditor有多个版本，我使用classic版，如图 ↓
- 如图，红框是已选的插件，蓝框点击Add即可添加插件，插件具体功能自己去摸索，我管他三七二十一，全给它加上了。
-
如图↓，蓝框是你添加的插件，红框插件可长按拖动调整顺序，但调不调不重要，后期可以使用代码来调
-
选择语言，注：一定要选择第一个Chinese，第二个是繁体字。
-
点击 Start → Download，下载已打包好的插件到本地。
-
已下载到本地 ↓
3、上面的步骤已克隆完成 + 已在线打包CXEditor5
-
运行克隆的CXEditor5
-
到克隆的这个路径 →
ckeditor5/packages/ckeditor5-build-classic -
若该路径有node_modules这个文件夹，请先删除，不然运行会出错。
-
若没有，执行命令
cnpm i，安装所有依赖 ↓- 注 推荐使用cnpm，因为用npm可能会下载出错或报其它错误。
- 若遇到错误直接删除 node_modules 文件夹，使用 cnmp 命令操作。
-
-
以上操作无误后，执行
npm run build, 成功后打开ckeditor5\packages\ckeditor5-build-classic\sample\index.html预览效果，若可以预览，证明成功，开始进入下一步↓
-
打开已经在线打包好的CXEditor5压缩包。
-
打开CXEditor5压缩包里的package.json配置，复制配置devDependencies里所有以 @ckeditor/xxxxxx 开头的插件。
-
粘贴到克隆的CXEditor5的
ckeditor5\packages\ckeditor5-build-classic\package.json的devDependencies中，有重复的删除重复的即可- 注： 所有 @ckeditor/xxxxx 的版本号一定要一致，除了 @ckeditor/ckeditor5-dev-xxxxx 外.
- 若版本不一样会报错，解决方法 ↓
- cmd 输入 ncu 命令查看当前配置可更新的插件，ncu -u 全部更新所有插件到最新版 或 ncu [依赖名称] 更新指定插件到最新版 或 npm i xxx@版本号 更新插件到指定版本。然后再 npm run build.
我的 package.json 参考如下
{
"name": "@ckeditor/ckeditor5-build-classic",
"version": "35.3.2",
"description": "The classic editor build of CKEditor 5 – the best browser-based rich text editor.",
"keywords": [
"ckeditor5-build",
"ckeditor",
"ckeditor5",
"ckeditor 5",
"wysiwyg",
"rich text",
"editor",
"html",
"contentEditable",
"editing",
"operational transformation",
"ot",
"collaboration",
"collaborative",
"real-time",
"framework"
],
"main": "./build/ckeditor.js",
"files": [
"build",
"ckeditor5-metadata.json",
"CHANGELOG.md"
],
"dependencies": {
"@ckeditor/ckeditor5-adapter-ckfinder": "^35.3.2",
"@ckeditor/ckeditor5-autoformat": "^35.3.2",
"@ckeditor/ckeditor5-basic-styles": "^35.3.2",
"@ckeditor/ckeditor5-block-quote": "^35.3.2",
"@ckeditor/ckeditor5-ckbox": "^35.3.2",
"@ckeditor/ckeditor5-ckfinder": "^35.3.2",
"@ckeditor/ckeditor5-cloud-services": "^35.3.2",
"@ckeditor/ckeditor5-easy-image": "^35.3.2",
"@ckeditor/ckeditor5-editor-classic": "^35.3.2",
"@ckeditor/ckeditor5-essentials": "^35.3.2",
"@ckeditor/ckeditor5-heading": "^35.3.2",
"@ckeditor/ckeditor5-image": "^35.3.2",
"@ckeditor/ckeditor5-indent": "^35.3.2",
"@ckeditor/ckeditor5-link": "^35.3.2",
"@ckeditor/ckeditor5-list": "^35.3.2",
"@ckeditor/ckeditor5-media-embed": "^35.3.2",
"@ckeditor/ckeditor5-paragraph": "^35.3.2",
"@ckeditor/ckeditor5-paste-from-office": "^35.3.2",
"@ckeditor/ckeditor5-style": "^35.3.2",
"@ckeditor/ckeditor5-table": "^35.3.2",
"@ckeditor/ckeditor5-typing": "^35.3.2"
},
"devDependencies": {
"@ckeditor/ckeditor5-adapter-ckfinder": "^35.3.2",
"@ckeditor/ckeditor5-autoformat": "^35.3.2",
"@ckeditor/ckeditor5-autosave": "^35.3.2",
"@ckeditor/ckeditor5-basic-styles": "^35.3.2",
"@ckeditor/ckeditor5-block-quote": "^35.3.2",
"@ckeditor/ckeditor5-ckfinder": "^35.3.2",
"@ckeditor/ckeditor5-cloud-services": "^35.3.2",
"@ckeditor/ckeditor5-editor-classic": "^35.3.2",
"@ckeditor/ckeditor5-essentials": "^35.3.2",
"@ckeditor/ckeditor5-find-and-replace": "^35.3.2",
"@ckeditor/ckeditor5-font": "^35.3.2",
"@ckeditor/ckeditor5-heading": "^35.3.2",
"@ckeditor/ckeditor5-highlight": "^35.3.2",
"@ckeditor/ckeditor5-horizontal-line": "^35.3.2",
"@ckeditor/ckeditor5-html-support": "^35.3.2",
"@ckeditor/ckeditor5-image": "^35.3.2",
"@ckeditor/ckeditor5-indent": "^35.3.2",
"@ckeditor/ckeditor5-link": "^35.3.2",
"@ckeditor/ckeditor5-list": "^35.3.2",
"@ckeditor/ckeditor5-media-embed": "^35.3.2",
"@ckeditor/ckeditor5-mention": "^35.3.2",
"@ckeditor/ckeditor5-paragraph": "^35.3.2",
"@ckeditor/ckeditor5-paste-from-office": "^35.3.2",
"@ckeditor/ckeditor5-restricted-editing": "^35.3.2",
"@ckeditor/ckeditor5-table": "^35.3.2",
"@ckeditor/ckeditor5-typing": "^35.3.2",
"@ckeditor/ckeditor5-word-count": "^35.3.2",
"@ckeditor/ckeditor5-style":"^35.3.2",
"@ckeditor/ckeditor5-alignment": "^35.3.2",
"@ckeditor/ckeditor5-core": "^35.3.2",
"@ckeditor/ckeditor5-dev-utils": "^31.0.0",
"@ckeditor/ckeditor5-dev-webpack-plugin": "^31.0.0",
"@ckeditor/ckeditor5-theme-lark": "^35.3.2",
"css-loader": "^5.2.7",
"postcss-loader": "^4.3.0",
"raw-loader": "^4.0.1",
"style-loader": "^2.0.0",
"terser-webpack-plugin": "^4.2.3",
"ts-loader": "^9.3.0",
"webpack": "^5.58.1",
"webpack-cli": "^5.0.1"
},
"engines": {
"node": ">=14.0.0",
"npm": ">=5.7.1"
},
"author": "CKSource (http://cksource.com/)",
"license": "GPL-2.0-or-later",
"homepage": "https://ckeditor.com/ckeditor-5",
"bugs": "https://github.com/ckeditor/ckeditor5/issues",
"repository": {
"type": "git",
"url": "https://github.com/ckeditor/ckeditor5.git",
"directory": "packages/ckeditor5-build-classic"
},
"scripts": {
"build": "webpack --mode production",
"preversion": "npm run build"
}
}
- 中文配置
ckeditor5\packages\ckeditor5-build-classic\webpack.config.js里的language修改为 zh-cn
- ckeditor.js配置插件
-
打开在线打包好的CXEditor5压缩包，复制
src\ckeditor.js的所有代码。 -
粘贴到克隆的
ckeditor5\packages\ckeditor5-build-classic\src\ckeditor.js中，全部覆盖该文件的代码。 -
我在该js文件加了个配置选项 ↓ （这些配置官网都有参考）
-
打包的时候我说过，不需要在意导航栏的顺序，这里可以用代码调整导航栏顺序。
-
调整
defaultConfig里的toolbar的item数组，可调整导航栏顺序。
我的 ckeditor.js 参考
/**
* @license Copyright (c) 2014-2022, CKSource Holding sp. z o.o. 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 Alignment from '@ckeditor/ckeditor5-alignment/src/alignment.js';
import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat.js';
import AutoImage from '@ckeditor/ckeditor5-image/src/autoimage.js';
import AutoLink from '@ckeditor/ckeditor5-link/src/autolink.js';
import Autosave from '@ckeditor/ckeditor5-autosave/src/autosave.js';
import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote.js';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold.js';
import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder.js';
import CKFinderUploadAdapter from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter.js';
import CloudServices from '@ckeditor/ckeditor5-cloud-services/src/cloudservices.js';
import Code from '@ckeditor/ckeditor5-basic-styles/src/code.js';
import DataFilter from '@ckeditor/ckeditor5-html-support/src/datafilter.js';
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials.js';
import FindAndReplace from '@ckeditor/ckeditor5-find-and-replace/src/findandreplace.js';
import FontBackgroundColor from '@ckeditor/ckeditor5-font/src/fontbackgroundcolor.js';
import FontColor from '@ckeditor/ckeditor5-font/src/fontcolor.js';
import FontFamily from '@ckeditor/ckeditor5-font/src/fontfamily.js';
import FontSize from '@ckeditor/ckeditor5-font/src/fontsize.js';
import GeneralHtmlSupport from '@ckeditor/ckeditor5-html-support/src/generalhtmlsupport.js';
import Heading from '@ckeditor/ckeditor5-heading/src/heading.js';
import Highlight from '@ckeditor/ckeditor5-highlight/src/highlight.js';
import HorizontalLine from '@ckeditor/ckeditor5-horizontal-line/src/horizontalline.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 IndentBlock from '@ckeditor/ckeditor5-indent/src/indentblock.js';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic.js';
import Link from '@ckeditor/ckeditor5-link/src/link.js';
import LinkImage from '@ckeditor/ckeditor5-link/src/linkimage.js';
import List from '@ckeditor/ckeditor5-list/src/list.js';
import ListProperties from '@ckeditor/ckeditor5-list/src/listproperties.js';
import MediaEmbed from '@ckeditor/ckeditor5-media-embed/src/mediaembed.js';
import MediaEmbedToolbar from '@ckeditor/ckeditor5-media-embed/src/mediaembedtoolbar.js';
import Mention from '@ckeditor/ckeditor5-mention/src/mention.js';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph.js';
import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice.js';
import StandardEditingMode from '@ckeditor/ckeditor5-restricted-editing/src/standardeditingmode.js';
import Strikethrough from '@ckeditor/ckeditor5-basic-styles/src/strikethrough.js';
import Style from '@ckeditor/ckeditor5-style/src/style.js';
import Subscript from '@ckeditor/ckeditor5-basic-styles/src/subscript.js';
import Table from '@ckeditor/ckeditor5-table/src/table.js';
import TableCaption from '@ckeditor/ckeditor5-table/src/tablecaption.js';
import TableCellProperties from '@ckeditor/ckeditor5-table/src/tablecellproperties';
import TableColumnResize from '@ckeditor/ckeditor5-table/src/tablecolumnresize.js';
import TableProperties from '@ckeditor/ckeditor5-table/src/tableproperties';
import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar.js';
import TextTransformation from '@ckeditor/ckeditor5-typing/src/texttransformation.js';
import Title from '@ckeditor/ckeditor5-heading/src/title.js';
import TodoList from '@ckeditor/ckeditor5-list/src/todolist';
import Underline from '@ckeditor/ckeditor5-basic-styles/src/underline.js';
import WordCount from '@ckeditor/ckeditor5-word-count/src/wordcount.js';
class Editor extends ClassicEditor {}
// Plugins to include in the build.
Editor.builtinPlugins = [
Alignment,
Autoformat,
AutoImage,
AutoLink,
Autosave,
BlockQuote,
Bold,
CKFinder,
CKFinderUploadAdapter,
CloudServices,
Code,
DataFilter,
Essentials,
FindAndReplace,
FontBackgroundColor,
FontColor,
FontFamily,
FontSize,
GeneralHtmlSupport,
Heading,
Highlight,
HorizontalLine,
Image,
ImageCaption,
ImageInsert,
ImageResize,
ImageStyle,
ImageToolbar,
ImageUpload,
Indent,
IndentBlock,
Italic,
Link,
LinkImage,
List,
ListProperties,
MediaEmbed,
MediaEmbedToolbar,
Mention,
Paragraph,
PasteFromOffice,
StandardEditingMode,
Strikethrough,
Style,
Subscript,
Table,
TableCaption,
TableCellProperties,
TableColumnResize,
TableProperties,
TableToolbar,
TextTransformation,
Title,
TodoList,
Underline,
WordCount
];
// Editor configuration.
Editor.defaultConfig = {
toolbar: {
items: [
'undo',
'redo',
'heading',
'|',
'bold',
'italic',
'subscript',
'strikethrough',
'underline',
'|',
'fontColor',
'fontBackgroundColor',
'fontSize',
'fontFamily',
'highlight',
'|',
'insertTable',
'link',
'blockQuote',
'code',
'horizontalLine',
'findAndReplace',
'|',
'bulletedList',
'numberedList',
'todoList',
'restrictedEditingException',
'|',
'outdent',
'indent',
'alignment',
'|',
'imageUpload',
'mediaEmbed',
'imageInsert',
'CKFinder',
'style'
],
shouldNotGroupWhenFull: true//导航栏自动折行
},
language: 'zh',
image: {
toolbar: [
'imageTextAlternative',
'toggleImageCaption',
'imageStyle:inline',
'imageStyle:block',
'imageStyle:side',
'linkImage'
]
},
table: {
contentToolbar: [
'tableColumn',
'tableRow',
'mergeTableCells',
'tableCellProperties',
'tableProperties'
]
}
};
export default Editor;
- 打包并运行
-
执行
nmp run build打包，打包成功后运行ckeditor5\packages\ckeditor5-build-classic\sample\index.html，如图，添加的功能已经有了
-
注意路径，别搞错了。
- 复制打包好的js到vue3中
-
复制克隆的CXEditor5该路径下所有文件
ckeditor5\packages\ckeditor5-build-classic\build,如图，把里面的所有文件复制到剪切板
-
粘贴到vue3中的
day\node_modules\@ckeditor\ckeditor5-build-classic\build路径下，替换所有文件。 -
现在我们的vue3已经可以使用所有功能了，去vue3 run试试，如图：
-
耶，完美运行。
4、安装插件
-
在线打包时，部分插件没有添加一起打包，可以手动安装插件。
-
安装插件和上面一样的原理，npm下载插件到克隆的
ckeditor5\packages\ckeditor5-build-classic\node_modules\@ckeditor文件夹里。- 插件下载请参考官网。
-
在
ckeditor5\packages\ckeditor5-build-classic\src\ckeditor.jsjs文件里导入、配置好插件。 -
然后npm run build 克隆的CXEditor5，成功后，把 run 成功的文件，也就是这个路径下的所有文件
\ckeditor5\packages\ckeditor5-build-classic\build，复制到vue3对应路径下。 -
替换所有文件，大功告成，插件就按装好了。
注：一定要在克隆的CXEditor5，npm run build 成功后再复制到vue3项目中。
小结
-
可能看完教程的小伙伴有点懵，我在这里细说下载的文件、克隆的文件、vue3的文件
-
一共下载了3个CXEditor5
- 第一个是Vue3的CXEditor5 →
npm install --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-classic - 第二个是克隆的CXEditor5 →
git clone -b stable https://github.com/ckeditor/ckeditor5 - 第三个是官网在线打包的CXEditor5 →
https://ckeditor.com/ckeditor-5/online-builder/
- 第一个是Vue3的CXEditor5 →
-
复制官网打包的ckeditor.js与package.json配置。
-
粘贴到克隆的CXEditor5对应文件中。
-
在克隆的CXEditor5项目下npm run build无误后，将build的文件复制到vue3。
问题解决
- 如图，这个样式没效果。
- 解决方法：因为没有导入css，导入css后,配置style插件就生效了。
- 问：你的css哪来的？
- 答：所有的样式与插件CXEditor5官网都可以找到。
配置的css
.ck.ck-content {
font-family: 'PT Serif', serif;
font-size: 16px;
line-height: 1.6;
padding: 2em;
}
.ck-content .ck-horizontal-line {
margin-bottom: 1em;
}
.ck.ck-content hr {
width: 100px;
border-top: 1px solid #aaa;
height: 1px;
margin: 1em auto;
}
.ck.ck-content h3.category {
font-family: 'Bebas Neue';
font-size: 20px;
font-weight: bold;
color: #d1d1d1;
letter-spacing: 10px;
margin: 0;
padding: 0;
}
.ck.ck-content h2.document-title {
font-family: 'Bebas Neue';
font-size: 50px;
font-weight: bold;
margin: 0;
padding: 0;
border: 0;
}
.ck.ck-content h3.document-subtitle {
font-size: 20px;
color: #e91e63;
margin: 0 0 1em;
font-weight: normal;
padding: 0;
}
.ck.ck-content p.info-box {
--background-size: 30px;
--background-color: #e91e63;
padding: 1.2em 2em;
border: 1px solid var(--background-color);
background: linear-gradient(135deg, var(--background-color) 0%, var(--background-color) var(--background-size), transparent var(--background-size)), linear-gradient(135deg, transparent calc(100% - var(--background-size)), var(--background-color) calc(100% - var(--background-size)), var(--background-color));
border-radius: 10px;
margin: 1.5em 2em;
box-shadow: 5px 5px 0 #ffe6ef;
}
.ck.ck-content blockquote.side-quote {
font-family: 'Bebas Neue';
font-style: normal;
float: right;
width: 35%;
position: relative;
border: 0;
overflow: visible;
z-index: 1;
margin-left: 1em;
}
.ck.ck-content blockquote.side-quote::before {
content: "“";
position: absolute;
top: -37px;
left: -10px;
display: block;
font-size: 200px;
color: #e7e7e7;
z-index: -1;
line-height: 1;
}
.ck.ck-content blockquote.side-quote p {
font-size: 2em;
line-height: 1;
}
.ck.ck-content blockquote.side-quote p:last-child:not(:first-child) {
font-size: 1.3em;
text-align: right;
color: #555;
}
.ck.ck-content span.marker {
background: yellow;
}
.ck.ck-content span.spoiler {
background: #000;
color: #000;
}
.ck.ck-content span.spoiler:hover {
background: #000;
color: #fff;
}
.ck.ck-content pre.fancy-code {
border: 0;
margin-left: 2em;
margin-right: 2em;
border-radius: 10px;
}
.ck.ck-content pre.fancy-code::before {
content: "";
display: block;
height: 13px;
background: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NCAxMyI+CiAgPGNpcmNsZSBjeD0iNi41IiBjeT0iNi41IiByPSI2LjUiIGZpbGw9IiNGMzZCNUMiLz4KICA8Y2lyY2xlIGN4PSIyNi41IiBjeT0iNi41IiByPSI2LjUiIGZpbGw9IiNGOUJFNEQiLz4KICA8Y2lyY2xlIGN4PSI0Ny41IiBjeT0iNi41IiByPSI2LjUiIGZpbGw9IiM1NkM0NTMiLz4KPC9zdmc+Cg==);
margin-bottom: 8px;
background-repeat: no-repeat;
}
.ck.ck-content pre.fancy-code-dark {
background: #272822;
color: #fff;
box-shadow: 5px 5px 0 #0000001f;
}
.ck.ck-content pre.fancy-code-bright {
background: #dddfe0;
color: #000;
box-shadow: 5px 5px 0 #b3b3b3;
}
- 效果图↓
注意：这里又有问题了，这仅仅是在编辑时的视图，当我们预览效果时：↓
可以看到预览没有红色框效果。
↓
↓
↓
解决方法：↓
↓
CKeditor5相关问题
CKEditor5修改推荐
- CKEditor5 代码块高亮(Prismjs)
End
2022/12/14 14:39 一次修改
2022/12/17 12:23 二次修改