vue-富文本框使用-wangeditor

1、下载

yarn add @wangeditor/editor
# 或者 npm install @wangeditor/editor --save

yarn add @wangeditor/editor-for-vue
# 或者 npm install @wangeditor/editor-for-vue --save

2、封装组件

<template>
  <div style="border: 1px solid #ccc">
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editor"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />
    <Editor
      :style="{ height: height, 'overflow-y': 'hidden' }"
      v-model="html"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="onCreated"
      @onChange="onChange"
    />
  </div>
</template>

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

export default {
  components: { Editor, Toolbar },
  props: {
    height: {
      type: String,
      default: "500px",
    },
  },
  data() {
    return {
      editor: null,
      html: "",
      toolbarConfig: {
        excludeKeys: ["group-video"],
      },
      editorConfig: {
        placeholder: "请输入内容...",
        MENU_CONF: {
          uploadImage: {
            fieldName: "your-fileName",
            base64LimitSize: 10 * 1024 * 1024, // 10M 以下插入 base64
          },
        },
      },
      mode: "default", // or 'simple'
    };
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
    },
    onChange(editor) {
      console.log(this.html);
      this.$emit("setData", editor.getHtml());
    },
  },
  mounted() {},
  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时，及时销毁编辑器
  },
};
</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>

3、引用组件

<template>
  <div class="box">
    <WangEfitor @setData="getHtml" height="30rem" />
    <div v-html="html"></div>
  </div>
</template>

<script>
import WangEfitor from "../../components/wangEditor.vue";
export default {
  components: {
    WangEfitor,
  },
  data() {
    return {
      html: "",
    };
  },
  methods: {
    // 传值
    getHtml(val) {
      console.log(val);
      this.html = val;
    },
  },
};
</script>

<style>
.box {
  width: 1000px;
}
</style>

4、文档优势 | wangEditor开源 Web 富文本编辑器，开箱即用，配置简单https://www.wangeditor.com/v5/