web-admin/src/components/editor.vue

<template>
  <div id="editor">
    <div style="border: 1px solid #ccc">
      <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" :mode="mode" />
      <Editor class="editor" :value="text" @input="toInput" :defaultConfig="ec" :mode="mode" @onCreated="onCreated" />
    </div>
  </div>
</template>

<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';

export default {
  name: 'editor',
  props: {
    text: { type: String },
    mode: { type: String, default: 'default' }, // 或者simple
    toolbarConfig: { type: Object, default: () => ({}) },
    editorConfig: { type: Object, default: () => ({}) },
  },
  model: {
    prop: 'text',
    event: 'input',
  },
  components: { Editor, Toolbar },
  data: function () {
    return {
      editor: null,
      ec: { placeholder: '请输入内容...', ...this.editorConfig },
    };
  },
  created() {},
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
    },
    toInput(e) {
      this.$emit('input', e);
    },
  },
  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时，及时销毁编辑器
  },
};
</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>
<style lang="less" scoped>
.editor {
  height: 500px;
  overflow-y: hidden;
}
</style>