wangEditor富文本插入自定义应用

前言

最近在业务中被要求用到了富文本的需求，经过调研最终决定使用国产的 wangeditor ，需要在富文本菜单里插入自己的外部应用，本文旨在记录。

Modal插入富文本应用

参考链接官方issue的一篇帖子： modalMenu方案

注册新菜单

ModalMenu的使用需要在内部定义元素，使代码糅合，业务代码与富文本代码不可分离（参考： 官方文档-自定义拓展功能）
所以使用menu栏上的按钮唤起新弹框，因此要注册个ButtonMenu

定义菜单class

import ReactDOM from "react-dom";
import YourModalMenu from "./YourModalMenu";

export default class ModalMenu {
    id = `modal-${Math.random().toString(36).slice(2)}`;
    title;
    tag;
    $ele;
    ifInit = false;
    controlShow;
    constructor() {

        this.title = '应用';
        this.iconSvg = `svg`; // 这里是你自己的svg
        this.tag = 'button';
        this.$ele = document.createElement('div');
        this.$ele.id = this.id;
        document.body.appendChild(this.$ele);
        // super();
    }

    getValue(editor) {
        console.log('getValue--------')
        return <YourModalMenu onInit={this.modalInit} editor={editor} />
    }

    modalInit = (method) => {
        console.log('modalInit----', method)
        // 这里把控制react的  方法透出
        this.controlShow = method;
    }


    isActive(editor) {
        return false // or false
    }

    isDisabled(editor) {
        return false // or true
    }

    exec(editor, value) {
        console.log('exec--------', editor, value, this.ifInit)
        if (this.ifInit) {
            this.controlShow(true);
            return;
        }
        ReactDOM.render(value, this.$ele);
        this.ifInit = true;
    }
}

• 在react-dom中，通过ReactDOM.render(ele, container)将指定元素（ele）渲染到目标容器（container）上
• 在打开新菜单时，将首先执行getValue(),在此处将editor实例传给自定义的modal；随后在exec()中将自定义的modal渲染到div容器上

新菜单到处并插入到工具栏

// 导出
export const customModalButton = {
    key: 'customModalButton',
    factory() {
        return new ModalMenu()
    }
}

在主文件里注册

import { Boot, DomEditor } from '@wangeditor/editor'
import { myModalMenuConf } from './customModalButton'

Boot.registerMenu(customModalButton)
// 工具栏配置
const toolbarConfig = {
  insertKeys: {
    index: -1, // 菜单位置
    keys: ['customModalButton'], // show menu in toolbar
  }
}

• 菜单注册时机toolbarConfig需要放在最外层，即主函数之外，否则会报错：Uncaught (in promise) Error: Duplicated key ‘xxx’ in menu items。

在自定义Modal操作Editor实例

做一个简单应用：记录光标所在富文本的位置，在此处插入后端返回的应用

    const node = {
      type: 'link', url: 'javascript:void(0);', 
      children: [{ text: AppName, bold: true, clolor: '#eb903a' }]
    }

    const iconNode = {
      type: 'image', src: serviceAppIcon, style: {width: '28px', height: '28px'},
      children: [{ text: app.AppName, bold: true, clolor: '#eb903a' }]
    }
   
    selectionRef.current && editor.select(selectionRef.current)
    const nodeList = [iconNode, node ]

     editor.insertNode(nodeList)

效果