vue使用ckeditor5教程
提示:这里的vue是指vue2.X或者vue3.X都可
前言
ckeditor5是一个富文本编辑器,具有MVC架构和虚拟DOM,还可以自定义富文本编辑器
vue2、vue3、angular、react的安装方式不同:安装文档
地址:官网、官方dome、gitHup仓库地址
一、安装
官方的demo安装如下:
// 经典编辑器($ npm install --save @ckeditor/ckeditor5-build-classic)
import Editor from '@ckeditor/ckeditor5-build-classic'
// 内联编辑器($ npm install --save @ckeditor/ckeditor5-build-inline)
import Editor from '@ckeditor/ckeditor5-build-inline'
// 气球编辑器($ npm install --save @ckeditor/ckeditor5-build-balloon)
import Editor from '@ckeditor/ckeditor5-build-balloon'
// 气球块编辑器($ npm install --save @ckeditor/ckeditor5-build-balloon-block)
import Editor from '@ckeditor/ckeditor5-build-balloon-block'
// 文档编辑器($ npm install --save @ckeditor/ckeditor5-build-document)
import Editor from '@ckeditor/ckeditor5-build-document'
// 文档分页编辑器($ npm install --save @ckeditor/ckeditor5-build-document-paged)
import Editor from '@ckeditor/ckeditor5-build-document-paged'
二、使用
安装方式有两种:一种是默认demo样式安装,还有一种是自定义编辑器安装
以demo里面的经典编辑器为例
// 以经典编辑器
npm install --save @ckeditor/ckeditor5-build-classic
完整代码如下(以vue2.X示例):
<template>
<div class="hello">
<div class="editor-view">
<!-- 编辑器 -->
<div id="editor"></div>
</div>
</div>
</template>
<script>
// 经典编辑器($ npm install --save @ckeditor/ckeditor5-build-classic)
import Editor from "@ckeditor/ckeditor5-build-classic";
export default {
name: "HelloWorld",
props: {
msg: String,
},
data() {
return {
// 编辑器对象
editor: undefined,
// 编辑内容
editorData: "<p>Content of the editor</p>",
// 编辑器配置
editorConfig: {
// 配置语言
language: "zh-cn",
// 功能栏
toolbar: {
items: ["Bold", "Italic", "Link"],
},
// 更多的配置....
},
};
},
mounted() {
// 初始化编辑器
Editor.create(document.querySelector("#editor"), this.editorConfig)
.then((editor) => {
console.log("创建成功");
// 记录编辑器对象
this.editor = editor;
// 监听内容变化
editor.model.document.on("change:data", (e) => {
// 输出当前内容
console.log(editor.getData(), e);
});
// 设置内容 初始化内容
editor.setData(this.editorData);
})
.catch(() => {
console.log("创建失败");
});
},
};
</script>
以上是使用npm安装默认样式的依赖,安装插件见该文
自定义安装
1.从官网自主选择需要的工具(如图)
上面picked plugins:是当前模板已有的工具,向下滑动还有很多可选,想要什么点add即可添加成功,注意部分工具右上角有个小星星是指要收费,不想要的remove即可
点击上方没有置灰的即可拖到下面,下面不想要的点击一次即可拖到上面
点击start开始构建配置的富文本编辑器,并下载安装包。
后续使用我是将安装包放在npm上然后安装插件使用的
三.报错
如果在使用过程中遇到如下报错,可以查看官方文档对应的报错解说官方错误码解释
// 冒号后面的是错误码
CKEditorError: editor-isreadonly-has-no-setter
CKEditorError: ckeditor-duplicated-modules
...