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

<template>
  <div class="ckeditor" style="margin-bottom: 10px;">
    <textarea :id="id" :value="value"></textarea>
  </div>
</template>

<script>
let inc = 0;
export default {
  props: {
    value: {
      type: String
    },
    id: {
      type: String,
      default: () => `editor-${++inc}`
    },
    height: {
      type: String,
      default: "200px"
    },
    width: {
      type: String,
      default: "980px"
    },
    toolbar: {
      type: [String, Array],
      default: null
    },
    language: {
      type: String,
      default: "zh-cn"
    },
    extraplugins: {
      type: String,
      default: ""
    },
    readonly: {
      type: Boolean
    }
  },
  computed: {
    instance() {
      return window.CKEDITOR.instances[this.id];
    }
  },
  beforeUpdate() {
    if (this.value !== this.instance.getData()) {
      this.instance.setData(this.value);
    }
  },
  mounted() {
    let config = {
      toolbar: this.toolbar,
      language: this.language,
      height: this.height,
      width: this.width,
      extraPlugins: this.extraplugins,
      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"
    };
    window.CKEDITOR.replace(this.id, config);
    this.instance.on("instanceReady", ev => {
      ev.editor.setReadOnly(this.readonly);
    });
    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>