SAP开发语言ABAP开发入门

文章目录

• 前言
• Modal插入富文本应用
• • 注册新菜单
  • 在自定义Modal操作Editor实例

前言

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

Modal插入富文本应用

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

注册新菜单

定义菜单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;
    }
}

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

// 导出
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
  }
}

在自定义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)

效果