Wangeditor 的配置与实例【图片上传+排除菜单】

用wangeditor封装一个自定义富文本组件

安装

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

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

引入

import ‘@wangeditor/editor/dist/css/style.css’ // 引入 css

import { onBeforeUnmount, ref, shallowRef, onMounted } from ‘vue’
import { Editor, Toolbar } from ‘@wangeditor/editor-for-vue’

模板都是官网可以直接抄的，这里就不过多赘述
官网地址：https://www.wangeditor.com/v5/for-frame.html#%E4%BD%BF%E7%94%A8-1

接下来看一下用到比较多的场景的配置

图片上传

    const editorConfig = {
      placeholder: "请输入内容...",
      MENU_CONF: {
        uploadImage: {
          server: '你的服务端地址',
           form-data fieldName ，默认值 'wangeditor-uploaded-image'
          fieldName: "",
          maxFileSize: 1 * 1024 * 1024, // 1M
          //需要携带的请求头内容
          headers: { },
          // 最多可上传几个文件，默认为 100
          maxNumberOfFiles: 5,
          onBeforeUpload(file) {
            // file 选中的文件，格式如 { key: file }
            return file;
            // 可以 return
            // 1. return file 或者 new 一个 file ，接下来将上传
            // 2. return false ，不上传这个 file
          },
          customInsert: (res, insertFn) => {
          //这里可以去看一下官网的例子，由于服务端不是按照官网所示的格式返回，所以需要自己处理一下
            // console.log(res, "res---");//服务端返回的数据
            // 从 res 中找到 url alt href ，然后插入图片
             insertFn(filePath, alt, href);
          },
          timeout: 60 * 1000, // 超时时间
        },
      },
    };

排除菜单

可以通过toolbar.getConfig()查看所有的配置，然后用excludeKeys排除掉菜单即可
比如我这里不需要视频上传和表格插入
const toolbarConfig = {
excludeKeys: [“group-video”, “insertTable”], //排除视频插入和表格插入
};
需要组件源码的可以私我~
当然我这只是皮毛，还有更多功能待研究~~