vue3+ts+wangEditor5菜单栏添加自定义图标按钮，自定义弹出界面内容，自定义插入链接 五步走

Wangeditor安装：VUE3的安装 ，其它看官网：

npm install @wangeditor/editor --save

npm install @wangeditor/editor-for-vue@next --save

官网：优势 | wangEditor

官方插入自定义内容样例：

https://github.com/wangeditor-team/wangEditor/blob/master/packages/basic-modules/src/modules/link/menu/InsertLink.ts

官方上传附件样例：

GitHub - wangeditor-team/wangEditor-plugin-upload-attachment: wangEditor upload-attachments plugin

参考链接：

wangEditor编辑器在vue使用并自定义菜单功能_wangeditor自定义菜单_陈Joys的博客-CSDN博客

效果图

1，定义类：在最复杂的弹出片定义菜单界面为例

import { IDomEditor, IModalMenu, SlateNode } from '@wangeditor/editor'

import { DOMElement } from '@wangeditor/editor/dist/editor/src/utils/dom'

import { shallowRef } from 'vue'

export class BigFileUploadMenu implements IModalMenu {    // TS 语法

    title: string;

    tag: string;

    showModal: boolean;

    modalWidth: number;

    iconSvg: string;

    constructor() {

        this.title = '大文件上传' //按钮文本

        //菜单栏图标

        this.iconSvg = '<svg viewBox="0 0 1024 1024"><path d="M960 896H64A64 64 0 0 1 0 832v-341.321143c0-35.364571 28.672-64 64-64h896a64 64 0 0 1 64 64V832A64 64 0 0 1 960 896z m-21.321143-85.321143V512H85.321143V810.678857h853.357714zM469.321143 341.321143a