Wangeditor

背景在网上找了一些wangEditor编辑器实现格局刷的代码，然而都是基于v4版本的，齐全不适用于v5版本，所以只能依据文档和源码，本人实现了一个繁难版本的 实现第一步注册新菜单（https://www.wangeditor.com/v5...）格局刷外部次要实现，点击格局刷时保留选中文字的款式 // FormatterBtn.tsx import type { IButtonMenu, IDomEditor } from '@wangeditor/editor';import { SlateEditor } from '@wangeditor/editor';class FormatterBtn implements IButtonMenu { title = '格局刷'; tag = 'button'; // JS 语法 iconSvg = '<svg t="1665739261235" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6325" width="200" height="200"><path d="M1024 1012.48a2119.68 2119.68 0 0 1-45.312-409.6v-228.864a145.92 145.92 0 0 0-146.944-146.176h-128v-128a100.096 100.096 0 0 0-99.84-99.84h-182.016a100.608 100.608 0 0 0-100.352 99.84v128h-128a145.92 145.92 0 0 0-145.664 146.176v228.608a2139.904 2139.904 0 0 1-45.312 409.6L0 1024h1024zM421.888 99.84h182.016v128h-182.272v-128z m274.432 742.4l3.328-146.944a51.2 51.2 0 0 0-25.6-43.52 48.896 48.896 0 0 0-51.2 0 51.2 51.2 0 0 0-25.6 43.52l-2.304 121.344-4.352 69.12L588.8 921.6h-185.856a532.992 532.992 0 0 0 23.296-160.256 51.2 51.2 0 1 0-100.096 0A420.352 420.352 0 0 1 296.448 921.6H120.832l2.304-13.824a2033.92 2033.92 0 0 0 25.6-307.2v-39.168h728.576v67.072a2063.104 2063.104 0 0 0 25.6 281.6l2.304 13.824h-216.064zM877.312 460.8H148.48v-91.392a45.568 45.568 0 0 1 45.312-40.96h642.56a45.312 45.312 0 0 1 40.96 45.312z" p-id="6326"></path></svg>'; // 获取菜单执行时的 value ，用不到则返回空 字符串或 false getValue(): string | boolean { return ''; } // 菜单是否须要激活（如选中加粗文本，“加粗”菜单会激活），用不到则返回 false isActive(editor: IDomEditor & { copyStyleObject: any }): boolean { return !!editor?.copyStyleObject; } // 菜单是否须要禁用（如选中 H1 ，“援用”菜单被禁用），用不到则返回 false isDisabled(editor: IDomEditor): boolean { return !editor.getSelectionText(); } // 点击菜单时触发的函数 exec(editor: IDomEditor & { copyStyleObject: any }) { if (this.isDisabled(editor)) { return; } editor.copyStyleObject = SlateEditor.marks(editor); }}export default FormatterBtn;第二步格局刷插入到菜单中，文档中应用insertKeys能够插入对应地位，我在代码中尝试没失效，只能采纳笨办法，重写编辑器的菜单，你们能够再尝试下 ...

前言wangEditor v5 正式版公布在即，为了验证它的扩展性，我开发了几个罕用的第三方插件。本文介绍一下 formula 插件的设计和应用。 插入数学公式要应用 LateX 语法，渲染公式须要依赖工具 KateX。如 c = \pm\sqrt{a^2 + b^2} 将渲染为下图的公式。 PS：本插件不依赖于任何框架，JS Vue React 等任何框架都能够失常应用。 应用首先要理解 wangEditor v5 最根本的装置和应用，可参考文档。而后再查阅 wangEditor-plugin-formula 插件的文档。 装置和注册装置 katex 和 @wangeditor/plugin-formula yarn add katexyarn add @wangeditor/plugin-formula复制代码注册到 wangEditor import { Boot } from '@wangeditor/editor'import formulaModule from '@wangeditor/plugin-formula' // 注册。要在创立编辑器之前注册，且只能注册一次，不可反复注册。Boot.registerModule(formulaModule)复制代码此时 wangEditor 就曾经具备了显示公式的能力，但还须要配置菜单：插入公式，编辑公式。 配置菜单配置工具栏，把 insertFormula 和 editFormula 插入到 index 指定的地位。 import { IToolbarConfig } from '@wangeditor/editor'// 工具栏配置const toolbarConfig: Partial<IToolbarConfig> = { insertKeys: { index: 0, // 自定义 keys: [ 'insertFormula', // “插入公式”菜单 // 'editFormula' // “编辑公式”菜单 ], }, // 其余...}复制代码当然，editFormula 也能够配置到编辑器的悬浮菜单中 ...