learning-system-portal/src/components/RichTextEditor.vue

<template>
  <div class="editor-wrap">
    <div ref="editor" style="min-height: 200px"></div>
  </div>
</template>

<script>
import E from "wangeditor";

export default {
  name: "RichTextEditor",
  props: {
    value: { type: String, default: "" },
  },
  data() {
    return {
      editor: null,
    };
  },
  mounted() {
    const editor = new E(this.$refs.editor);
    editor.config.zIndex = 1000;
    editor.create();
    editor.txt.html(this.value || "");
    editor.disable(); // 只读
    this.editor = editor;
  },
  watch: {
    value(val) {
      if (this.editor && val !== this.editor.txt.html()) {
        this.editor.txt.html(val || "");
      }
    },
  },
  beforeDestroy() {
    if (this.editor) {
      this.editor.destroy();
      this.editor = null;
    }
  },
};
</script>

<style scoped>
.editor-wrap {
  width: 100%;
}
.editor-wrap >>> .w-e-toolbar {
  display: none;
}
.editor-wrap >>> .w-e-text-container {
  border: 0px !important;
  background-color: rgba(0, 0, 0, 0);
}
</style>