vue富文本（5版本）组件

<template>
  <div>
    <div style="border: 1px solid #ccc; width: 500px">
      <!-- 工具栏 -->
      <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" />
      <!-- 编辑器 -->
      <Editor style="height: 400px; overflow-y: hidden" :defaultConfig="editorConfig" v-model="html" @onChange="onChange" @onCreated="onCreated" />
    </div>
  </div>
</template>

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

export default {
  name: 'MyEditor',
  components: { Editor, Toolbar },
  props: {
    destDir: {
      type: String,
    },
  },
  data() {
    return {
      editor: null,
      html: '',
      toolbarConfig: {
        // toolbarKeys: [ /* 显示哪些菜单，如何排序、分组 */ ],
        // excludeKeys: [ /* 隐藏哪些菜单 */ ],
      },
      editorConfig: {
        placeholder: '请输入内容...',
        // autoFocus: false,

        // 所有的菜单配置，都要在 MENU_CONF 属性下
        MENU_CONF: {},
      },
    };
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor); // 【注意】一定要用 Object.seal() 否则会报错
      console.log('Created');
    },
    onChange(editor) {
      // console.log('onChange', editor.getHtml()); // onChange 时获取编辑器最新内容
    },

    loadHtml(html) {
      this.html = html;
    },
    insertTextHandler(html) {
      const editor = this.editor;
      if (editor == null) return;
      console.log(html);
      editor.insertText(html);
    },
    printEditorHtml() {
      const editor = this.editor;
      if (editor == null) return;
      console.log(editor.getHtml());
    },
    disableHandler() {
      const editor = this.editor;
      if (editor == null) return;
      editor.disable();
    },
    // 自定义校验图片
    customCheckImageFn(src, alt, url) {
      if (!src) {
        return;
      }
      if (src.indexOf('http') !== 0) {
        return '图片网址必须以 http/https 开头';
      }
      return true;

      // 返回值有三种选择：
      // 1. 返回 true ，说明检查通过，编辑器将正常插入图片
      // 2. 返回一个字符串，说明检查未通过，编辑器会阻止插入。会 alert 出错误信息（即返回的字符串）
      // 3. 返回 undefined（即没有任何返回），说明检查未通过，编辑器会阻止插入。但不会提示任何信息
    },

    // 转换图片链接
    customParseImageSrc(src) {
      // JS 语法
      if (src.indexOf('http') !== 0) {
        return `${this.pictureUrl}${src}`;
      }
      return src;
    },
  },
  created() {
    let that = this;
    this.editorConfig.MENU_CONF['uploadImage'] = {
      server: process.env.VUE_APP_API_MANAGE + '/uploadFileController/editUpload.do',
      fieldName: 'file',
      // 继续写其他配置...
      meta: {
        destDir: that.destDir,
      },
      headers: {
        adminToken: Cookie.get('adminToken'),
      },
      onSuccess(file, res) {
        // JS 语法
        console.log(`${file.name} 上传成功`, res);
      },
      // customInsert(res: any, insertFn: InsertFnType) {
      // TS 语法
      customInsert(res, insertFn) {
        // JS 语法
        // res 即服务端的返回结果
        // 从 res 中找到 url alt href ，然后插入图片
        insertFn(process.env.VUE_APP_SERVER + 'imageServer' + res.data.url, res.data.alt, res.data.href);
      },
    };

    // 插入图片
    this.editorConfig.MENU_CONF['insertImage'] = {
      onInsertedImage(imageNode) {
        // JS 语法
        if (imageNode == null) return;

        const { src, alt, url, href } = imageNode;
        console.log('inserted image', src, alt, url, href);
      },
      checkImage: that.customCheckImageFn, // 也支持 async 函数
      parseImageSrc: that.customParseImageSrc, // 也支持 async 函数
    };
  },
  mounted() {
    // // 模拟 ajax 请求，异步渲染编辑器
    // setTimeout(() => {
    //   this.html = '<p>Ajax 异步设置内容 HTML</p>';
    // }, 1500);
  },
  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时，及时销毁 editor ，重要！！！
  },
};
</script>
<style>
.w-e-full-screen-container {
  bottom: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  left: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  position: fixed;
  right: 0 !important;
  top: 0 !important;
  width: 100% !important;
  z-index: 99999;
}
</style>
<style src="@wangeditor/editor/dist/css/style.css"></style>