vue使用ckeditor5

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