wangEditor

官方文档

安装 wangEditor

yarn add @wangeditor/editor

yarn add @wangeditor/editor-for-vue

创建组件

在 src/components 文件夹下创建 MyEditor.vue 文件，内容如下：

<template>
  <div style="border: 1px solid #ccc">
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editor"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />
    <Editor
      style="height: 150px; overflow-y: hidden"
      :value="value"
      @input="(value) => $emit('input', value)"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="onCreated"
    />
  </div>
</template>

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

  export default {
    components: { Editor, Toolbar },
    props: {
      value: {
        type: String,
        default: "",
      },
    },
    data() {
      return {
        editor: null,
        toolbarConfig: {},
        editorConfig: { placeholder: "请输入内容..." },
        mode: "default", // or 'simple'
      };
    },
    methods: {
      onCreated(editor) {
        this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
      },
    },
    beforeDestroy() {
      const editor = this.editor;
      if (editor == null) return;
      editor.destroy(); // 组件销毁时，及时销毁编辑器
    },
  };
</script>

使用组件

<template>
  <div>
    <MyEditor v-model="content" />
  </div>
</template>

<script>
  import MyEditor from "@/components/MyEditor.vue";

  export default {
    components: { MyEditor },
    data() {
      return {
        content: "",
      };
    },
  };
</script>