examcloud-admin-web/src/components/ckeditor.vue

<template>
  <div :style="divStyle">
    <div class="ckeditor">
      <textarea
        :id="id"
        :display="display"
        :value="value"
        class="el-textarea__inner"
      ></textarea>
    </div>
  </div>
</template>

<script>
let inc = 0;
export default {
  data() {
    return {
      divStyle: null
    };
  },
  props: {
    display: {
      type: String,
      default: "inline"
    },
    value: {
      type: String
    },
    id: {
      type: String,
      default: () => `editor-${++inc}`
    },
    height: {
      type: String,
      default: "300px"
    },
    width: {
      type: String,
      default: "500px"
    },
    language: {
      type: String,
      default: "zh-cn"
    },
    extraplugins: {
      type: String,
      default: ""
    }
  },
  computed: {
    instance() {
      return window.CKEDITOR.instances[this.id];
    }
  },
  beforeUpdate() {
    if (this.value !== this.instance.getData()) {
      this.instance.setData(this.value);
    }
  },
  mounted() {
    if (this.width) {
      this.divStyle = "width:" + this.width + ";";
    } else {
      this.divStyle = "width:500px";
    }

    this.divStyle = this.divStyle + "margin-top:-15px;";

    let config = {
      language: this.language,
      height: this.height,
      width: this.width,
      extraPlugins: this.extraplugins,
      toolbarGroups: [
        { name: "clipboard", groups: ["clipboard", "undo"] },
        {
          name: "editing",
          groups: ["find", "selection", "spellchecker", "editing"]
        },
        { name: "links", groups: ["links"] },
        { name: "insert", groups: ["insert"] },
        { name: "forms", groups: ["forms"] },
        { name: "tools", groups: ["tools"] },
        { name: "document", groups: ["mode", "document", "doctools"] },
        { name: "others", groups: ["others"] },
        "/",
        { name: "basicstyles", groups: ["basicstyles", "cleanup"] },
        {
          name: "paragraph",
          groups: ["list", "indent", "blocks", "align", "bidi", "paragraph"]
        },
        { name: "styles", groups: ["styles"] },
        { name: "colors", groups: ["colors"] },
        { name: "about", groups: ["about"] }
      ],
      removeButtons:
        "Underline,Subscript,Superscript,Image,HorizontalRule,Unlink,Link,Scayt,Cut,Copy,Paste,PasteText,PasteFromWord,Maximize,Italic,Bold,NumberedList,BulletedList,Indent,Outdent,Blockquote,Styles,Format,About,RemoveFormat,Strike"
    };
    if (this.display !== "inline") {
      window.CKEDITOR.replace(this.id, config);
    } else {
      window.CKEDITOR.inline(this.id, config);
    }
    this.instance.on("change", () => {
      let html = this.instance.getData();
      if (html !== this.value) {
        this.$emit("input", html);
      }
    });
  },
  beforeDestroy() {
    if (this.instance) {
      this.instance.focusManager.blur(true);
      this.instance.destroy();
    }
  }
};
</script>
<style>
.ckeditor::after {
  content: "";
  display: table;
  clear: both;
}
</style>