wangeditor自定义按钮及上传文件配置

我们这次项目是一个在线考试系统，其中有一个富文本的需求，并且有一个填空的样式，但是wangeditor富文本并没有原生的这些东西，只能自己自定义一下

自定义按钮js文件

import E from 'wangeditor' // npm 安装
const { BtnMenu } = E
var _this = null
export default class AlertMenu extends BtnMenu {
    constructor(editor) {
        // data-title属性表示当鼠标悬停在该按钮上时提示该按钮的功能简述
        _this = editor
        const $elem = E.$(
            `

                填空
            `
        )
        super($elem, editor)
    }
    // 菜单点击事件
    clickHandler() {
        // 做任何你想做的事情
        // 可参考【常用 API】文档，来操作编辑器
        _this.cmd.do("insertHTML", `     1     `)

    }
    // 菜单是否被激活（如果不需要，这个函数可以空着）
    // 1. 激活是什么？光标放在一段加粗、下划线的文本时，菜单栏里的 B 和 U 被激活，如下图
    // 2. 什么时候执行这个函数？每次编辑器区域的选区变化（如鼠标操作、键盘操作等），都会触发各个菜单的 tryChangeActive 函数，重新计算菜单的激活状态
    tryChangeActive() {
        // 激活菜单
        // 1. 菜单 DOM 节点会增加一个 .w-e-active 的 css class
        // 2. this.this.isActive === true
        this.active()
        // // 取消激活菜单
        // // 1. 菜单 DOM 节点会删掉 .w-e-active
        // // 2. this.this.isActive === false
        // this.unActive()
    }
}

组件中的书写

<template>
  <div>
    <button @click="dialogVisible = true">点击</button>
    <el-dialog
      @opened="createEditor()"
      title="提示"
      :visible.sync="dialogVisible"
      width="70%"
      :before-close="handleClose"
    >
      <div id="editor"></div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="sureFn">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import E from "wangeditor";
import { Dialog } from "element-ui";
import AlertMenu from ""; // 根据上边的js文件实际路径进行引入即可
import myStore from "../../store/index";
export default {
  name: "myText",
  components: {
    [Dialog.name]: Dialog,
  },
  data() {
    return {
      dialogVisible: false,
      editor: null,
      editorContent: "",
      value: "",
    };
  },
  methods: {
    createEditor() {
      this.editor = new E("#editor");
      //配置内容改变时的函数,并将其赋值给vule
      this.editor.config.onchange = (html) => {
        this.value = html;
      };
      this.editor.config.menus = [
        "head", // 标题
        "bold", // 粗体
        "fontSize", // 字号
        "fontName", // 字体
        "italic", // 斜体
        "underline", // 下划线
        "strikeThrough", // 删除线
        "foreColor", // 文字颜色
        "backColor", // 背景颜色
        "link", // 插入链接
        "list", // 列表
        "justify", // 对齐方式
        "quote", // 引用
        "emoticon", // 表情
        "image", // 插入图片
        "table", // 表格
        "code", // 插入代码
        "undo", // 撤销
        "redo", // 重复
      ];
      // 配置自定义按钮
      this.editor.menus.extend("alertMenu", AlertMenu); // 配置扩展的菜单
      this.editor.config.menus = this.editor.config.menus.concat("alertMenu");
      // 配置上传图片
      this.editor.config.uploadImgShowBase64 = true; // base 64 存储图片
      this.editor.config.uploadImgServer = "/api/admin/addPicture";
      // 配置服务器端地址
      this.editor.config.uploadFileName = "file"; // 后端接受上传文件的参数名
      this.editor.config.uploadImgHeaders = {
        token: myStore.state.token, // 设置请求头
      };
      this.editor.config.uploadImgHooks = {
        fail: function () {
          this.$message({
            message: "图片上传失败",
            type: "warning",
          });
        },
        error: function () {
          this.$message.error("图片上传出错");
        },
        success: (xhr, editor, result) => {
          // 图片上传成功回调
          console.log("成功", result);
        },
        customInsert: (insertImg, result, editor) => {
          // 图片上传成功，插入图片的回调
          console.log(result);
          console.log(editor);
          insertImg(result.data);
        },
      };
      this.editor.create();
    },
    handleClose() {
      this.$confirm("确认要关闭吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
        })
        .catch(() => {});
    },
  },
  mounted(){
	this。createEditor()
}
};
</script>

以上就是自定义按钮和上传图片的一些配置