​vue3使用wangeditor并且添加自己的自定义菜单工具

在wangeditor中可以自定义自己的菜单按钮，点击后弹出自己的界面来扩展功能

在vue工具类文件夹下创建ts文件，在官方文档中是有价绍的，我这里使用了jq的一写写法，所有需要引用jq，不需要的酌情添加，我需要实现的功能就是给wangeditor富文本编辑菜单添加一个按钮，点击后的出现一个300px宽的页面，页面需要一个图片上传的按钮，点击后打开文件选择页面选择图片，选择上传后在页面展示缩小版的图片，并且在边上需要一个按钮，点击后复制指定大小的img标签代码，直接上代码了

下面是我需要导入引用的部分

import type { IDomEditor, IModalMenu, SlateNode } from "@wangeditor/editor";
import $ from "jquery";
import { ref } from "vue";
import { 图片上传接口 } from "@/api/reqapi";
import type { FieldValues } from "plus-pro-components";
import useClipboard from "vue-clipboard3";

如何就是wangeditor的配置和需要展示的内容配置了

const { toClipboard } = useClipboard();

export class BigFileUploadMenu implements IModalMenu {
  title: string;
  tag: string;
  showModal: boolean;
  modalWidth: number;
  iconSvg: string;

  constructor() {
    this.title = "图片上传";
    this.iconSvg =
      '<svg viewBox="0 0 1024 1024" version="1.1" ><path d="M320 627.2l29.866667-29.866667 29.866666 29.866667 64 64 149.333334-149.333333 29.866666-29.866667 29.866667 29.866667 196.266667 196.266666V298.666667H213.333333v435.2l106.666667-106.666667z m29.866667 29.866667L238.933333 768h136.533334l-4.266667-4.266667 42.666667-42.666666-64-64zM823.466667 768l-196.266667-196.266667-196.266667 196.266667h392.533334zM896 256v554.666667H170.666667V256h725.333333z" fill="#444444" p-id="2819"></path></svg>';
    this.tag = "button";
    this.showModal = true;
    this.modalWidth = 270;
  }

  isActive(_editor: IDomEditor): boolean {
    return false;
  }
  getValue(_editor: IDomEditor): string | boolean {
    return "";
  }
  isDisabled(_editor: IDomEditor): boolean {
    return false;
  }
  exec(_editor: IDomEditor, value: string | boolean) {}
  // 弹出框 modal 的定位：1. 返回某一个 SlateNode； 2. 返回 null （根据当前选区自动定位）
  getModalPositionNode(_editor: IDomEditor): SlateNode | null {
    return null;
  }

  // 定义 modal 内部的 DOM Element
  getModalContentElem(editor: IDomEditor): DOMElement {
    const $li = $("<ul style='width: 100%;'></ul>");
    const $content = $("<div style='height: 250px;overflow-y: auto;'></div>");
    const $button = $(
      "<div style='width: 100%; height:50px;'><button style='height: 30px;  display: flex;justify-content: center;align-items: center; '>上传图片</button></div>"
    );
    $content.append($button);

    $button.on("click", () => {
      const input = document.createElement("input");
      input.type = "file";
      input.accept = "image/*";
      input.addEventListener("change", event => {
        let imgstring: string = "";
        const file = (event.target as HTMLInputElement).files![0];
        const reader = new FileReader();
        let img_url = "";
        reader.onload = async () => {
          let values = ref<FieldValues>({
            content: ""
          });
          const base64String = reader.result as string;
          imgstring =
            '<img src="' +
            base64String +
            '" alt="图片.jpg" data-href="" style=""/>';
          values.value.content = imgstring;
          const rep_data: any = await 上传图片接口(values);
          let imgcont = rep_data.content;
          img_url =
            '<img src="' +
            imgcont +
            '" alt="图片.jpg" data-href="" style="height: 90px; width:auto;"/>';
          let imgbutt =
            "<button id='test' style='height: 30px; margin-top: 10px;'>复制图片代码</button>";
          let imgbt = "<li >" + img_url + imgbutt + "</li>";
          let imght =
            "<img src='" + imgcont + "' style='height: 373px; width:274; '/>";
          const $img_urls = $(imgbt);
          $content.append($li.append($img_urls));
          $("#test").on("click", async () => {
            await toClipboard(imght);
            console.log("复制成功!");
          });
        };
        reader.readAsDataURL(file);
      });
      input.click();
    });

    return $content[0];
  }
}

上面就是uplimage.ts的全部代码，下面就是在自己组件的富文本编辑器中使用我们的工具，当然，导入还是不可缺少的，组件导入如下，第一句是导入自己菜单需要的，后面的是wangeditor需要的

import { BigFileUploadMenu } from "@/utils/uplimage";
import { Boot, type IDomEditor } from "@wangeditor/editor";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";

导入后我们需要另一个，就是将我们的注册进菜单，下面就是注册进菜单

/** 记录 editor 实例，重要！*/

const handleCreated = editor => {
  editorRef.value = editor;
  const BigFileUploadMenuButton = {
    key: "BigFileUploadMenu", // 定义 menu key ：要保证唯一、不重复（重要）

    factory() {
      return new BigFileUploadMenu(); // 把 `YourMenuClass` 替换为你菜单的 class
    }
  };
  Boot.registerMenu(BigFileUploadMenuButton);
};

注册之后就是在页面菜单显示我们需要的按钮了，菜单配置如下

// 工具栏配置
const toolbarConfig = {
  toolbarKeys: [
    // 菜单 key
    "headerSelect",
    "bold", // 加粗
    "italic", // 斜体
    "through", // 删除线
    "underline", // 下划线
    "color", // 文字颜色
    "fontSize", // 字体大小
    "lineHeight", // 行高
    "uploadImage", // 上传图片
    "BigFileUploadMenu", //上传图片不限制大小
    "delIndent", // 缩进
    "indent", // 增进
    "deleteImage", //删除图片
    "divider", // 分割线
    "insertTable", // 插入表格
    "justifyCenter", // 居中对齐
    "justifyJustify", // 两端对齐
    "justifyLeft", // 左对齐
    "justifyRight", // 右对齐
    "undo", // 撤销
    "redo", // 重做
    "clearStyle", // 清除格式
    "fullScreen", // 全屏
    "codeBlock" //代码块
  ]
};

看看效果吧

其中可以看见我们的菜单图标已经显示出来了

点击后看看，我们需要的已经展示出来了，然后就是看功能了

点击上传后，图片缩小版显示，点击按钮确定复制了html代码

本次添加功能结束，欧克，跑路拉