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

由于CKEditor5 对IE 11不支持。那么这里对CKEditor4 进行重新封装

安装

npm install ckeditor4-vue

引入ckeditor4

import CKEditor from "ckeditor4-vue";

新建CKEditor4组件

<template>
  <div>
    <ckeditor
      :editor="editor"
      :value="content"
      :type="type"
      :read-only="disabled"
      @input="onEditorInput"
      :config="editorConfig"
    ></ckeditor>
  </div>
</template>

<script>
import CKEditor from "ckeditor4-vue";
export default {
  name: "CkEditor4",
  components: {
    ckeditor: CKEditor.component
  },
  data() {
    return {
      editorConfig: {
        language: "zh-cn"
      }
    };
  },
  model: {
    prop: "content",
    event: "updateContent"
  },
  props: {
    // 文本
    content: {
      type: String,
      default: ""
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    },
    // 富文本类型两种（classic）和（inline）
    isInline: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    type() {
      return this.isInline ? "inline" : "classic";
    }
  },
  methods: {
    onEditorInput(val) {
      this.$emit("updateContent", val);
    }
  }
};
</script>

使用

使用方式和富文本vue集成 CKEditor5的简单封装中的使用方式完全一致。

效果

1.设置值

2.禁用

具体更细致的配置参考ckeditor4 官网
千里之行
始于足下