当前位置: 首页 > article >正文

wangEditor富文本插入自定义应用

文章目录

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


前言

最近在业务中被要求用到了富文本的需求,经过调研最终决定使用国产的 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)

效果

在这里插入图片描述


http://www.kler.cn/a/411034.html

相关文章:

  • Docker部署mysql:8.0.31+dbsyncer
  • c++编程玩转物联网:使用芯片控制8个LED实现流水灯技术分享
  • ESP32学习笔记_FreeRTOS(3)——SoftwareTimer
  • 加速科技精彩亮相中国国际半导体博览会IC China 2024
  • OEM sql monitoring 类似SQL
  • 数据结构(Java版)第二期:包装类和泛型
  • 大厂也在用的分布式链路追踪:TraceIdFilter + MDC + Skywalking
  • DAPP分币系统开发的安全性分析
  • C++中的链式操作原理与应用(一)
  • 学习日记_20241126_聚类方法(自组织映射Self-Organizing Maps, SOM)
  • 如何使用GCC手动编译stm32程序
  • 计算机的错误计算(一百六十七)
  • JAVA题目笔记(二十)Stream流综合练习+方法引用
  • PICO 获取设备号 SN码
  • Spring Boot林业产品推荐系统:从理论到实践
  • uniapp前端开发,基于vue3,element plus组件库,以及axios通讯
  • 【消息序列】详解(7):剖析回环模式--设备测试的核心利器
  • 基于vite创建的react18项目的单元测试
  • 微服务——服务配置中心
  • 【Linux】TCP网络编程
  • 【计算机网络】核心部分复习
  • EntitasLite源码分析(一)
  • Java中的JSONObject详解
  • Day3 洛谷Day3 1161+1179+1200+1304
  • 【AI系统】昇腾 AI 架构介绍
  • 直接抄作业!Air780E模组LuatOS开发:位运算(bit)示例