富文本vue集成 CKEditor5的简单封装

148 阅读 0 评论 98 点赞

我是靠谱客的博主彪壮老虎，这篇文章主要介绍富文本vue集成 CKEditor5的简单封装，现在分享给大家，希望可以做个参考。

市面上众多富文本编辑器quill、wangEditor、Tinymce、ckEditor等等，这里感觉ckEditor最为丝滑~。

文章

- 安装
- - 安装vue组件相关以及富文本类型
  - 其他富文本类型
- 新建CkEditor5组件
- 使用

安装

安装vue组件相关以及富文本类型

复制代码

1
2
npm install --save @ckeditor/ckeditor5-vue2

复制代码

1
2
npm install --save @ckeditor/ckeditor5-build-classic

其他富文本类型

类型预览

复制代码

1
2
npm install --save @ckeditor/ckeditor5-build-inline

复制代码

1
2
npm install --save @ckeditor/ckeditor5-build-balloon

复制代码

1
2
npm install --save @ckeditor/ckeditor5-build-balloon-block

复制代码

1
2
npm install --save @ckeditor/ckeditor5-build-decoupled-document

新建CkEditor5组件

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<template>
  <div>
    <ckeditor
      :editor="editor"
      :value="content"
      :disabled="disabled"
      @input="onEditorInput"
      :config="editorConfig"
    ></ckeditor>
  </div>
</template>

<script>
import CKEditor from "@ckeditor/ckeditor5-vue2";
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
import "@ckeditor/ckeditor5-build-classic/build/translations/zh-cn";
export default {
  name: "CkEditor5",
  components: {
    ckeditor: CKEditor.component
  },
  data() {
    return {
      editor: ClassicEditor,
      editorConfig: {
        language: "zh-cn"
      }
    };
  },
  model: {
    prop: "content",
    event: "updateContent"
  },
  props: {
    // 文本
    content: {
      type: String,
      default: ""
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    onEditorInput(val) {
      this.$emit("updateContent", val);
    }
  }
};
</script>

使用

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<template>
  <div>
    <ck-editor v-model="test" :disabled="disabled"></ck-editor>
    <el-button @click="getData">获取绑定数据</el-button>
    <el-button @click="setDisabeld">设置是否禁用</el-button>
  </div>
</template>

<script>
import ckEditor from "@/components/ckeditor/Ckeditor5";
export default {
  name: "Home",
  components: {
    ckEditor
  },
  data() {
    return {
      test: "test",
      disabled: false
    };
  },
  methods: {
    getData() {
      console.log(this.test);
    },
    setDisabeld() {
      this.disabled = !this.disabled;
    }
  }
};
</script>