写点什么

15 行代码在 wangEditor v5 使用数学公式

  • 2022 年 2 月 21 日
  • 本文字数:2235 字

    阅读完需:约 7 分钟

前言 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 也可以配置到编辑器的悬浮菜单中


import { IEditorConfig } from '@wangeditor/editor'


const editorConfig: Partial<IEditorConfig> = {// 选中 公式节点 时的悬浮菜单 hoverbarKeys: {formula: {menuKeys: ['editFormula'], // “编辑公式”菜单},},


// 其他...}复制代码此时,即可通过菜单来插入公式:


选中公式节点时,还可以编辑公式:


显示 HTML 执行 editor.getHtml() 获取的公式节点的 HTML 格式如下,就是一个普通的 <span> ,其中 data-value 即 LateX 语法的字符串。


<span data-w-e-type="formula" data-w-e-is-void data-w-e-is-inline data-value="c = \pm\sqrt{a^2 + b^2}"></span>复制代码将这个 <span> 渲染为公式卡片,依然可以借助 KateX ,简单方便。


katex.render("c = \pm\sqrt{a^2 + b^2}", spanElement, {throwOnError: false})复制代码回显 HTML (重新编辑)获取的 HTML 依然支持回显到编辑器中,可以正常解析为公式卡片。这些能力早在注册 formulaModule 之后就已经具备了。


const editor = createEditor({selector: '#editor-container',config: editorConfig,html: <p>hello&nbsp;world<span data-w-e-type="formula" data-w-e-is-void data-w-e-is-inline data-value="c = \\pm\\sqrt{a^2 + b^2}"></span></p>,})复制代码


设计一些基本的扩展能力,如注册菜单、生成 html ,解析 html 等,这些 wangEditor 都早已具备且成熟,参考文档和该插件的源码即可。


编辑器内部渲染公式卡片本文重点介绍:如何使用 KateX 在编辑器中渲染公式卡片?因为,wangEditor 中渲染流程是比较复杂的,如下图:


要借助 KateX 渲染是直接操作 DOM ,而 wangEditor 内部渲染需要先生成 VDOM ,然后再使用 snabbdom.js 来 patch DOM 。两者无法兼容。


最后找到的解决方案是:自定义 DOM 元素。注册一个 <w-e-formula-card data-value="xxx"><w-e-formula-card> 元素,即可像普通的 <div> <p> 一样生成 VDOM ,然后 patch 渲染。


// 构建 formula vnodeconst { value = '' } = elem as FormulaElementconst formulaVnode = h('w-e-formula-card',{dataset: { value },},null)复制代码


注册 <w-e-formula-card> 自定义元素借助 KateX ,开发起来非常简单。注册一个自定义元素,内部使用 Shadow DOM 渲染即可。


import katexStyleContent from '!!raw-loader!katex/dist/katex.css'import katex from 'katex'


class WangEditorFormulaCard extends HTMLElement {private span: HTMLElement


// 需要监听的 attrstatic get observedAttributes() {return ['data-value']}


constructor() {super()const shadow = this.attachShadow({ mode: 'open' }) // Shadow DOMconst document = shadow.ownerDocument


const style = document.createElement('style')style.innerHTML = katexStyleContent // 加载 css 文本shadow.appendChild(style)
const span = document.createElement('span')span.style.display = 'inline-block'shadow.appendChild(span)this.span = span
复制代码


}


// 'data-value' 变化时,重新渲染 DOMattributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {if (name === 'data-value') {if (oldValue == newValue) returnthis.render(newValue || '')}}


// 用 KateX 渲染公式 private render(value: string) {katex.render(value, this.span, {throwOnError: false,})}}


window.customElements.define('w-e-formula-card', WangEditorFormulaCard)复制代码总结本文重点


公式使用 LateX 语法,使用 KateX 工具来渲染编辑器内部注册自定义元素 <w-e-formula-card> 渲染公式开发 formula 插件验证了 wangEditor v5 全面的扩展能力


最后

如果你觉得此文对你有一丁点帮助,点个赞。或者可以加入我的开发交流群:1025263163 相互学习,我们会有专业的技术答疑解惑


如果你觉得这篇文章对你有点用的话,麻烦请给我们的开源项目点点 star:http://github.crmeb.net/u/defu不胜感激 !


PHP 学习手册:https://doc.crmeb.com

技术交流论坛:https://q.crmeb.com

用户头像

还未添加个人签名 2021.11.02 加入

CRMEB就是客户关系管理+营销电商系统实现公众号端、微信小程序端、H5端、APP、PC端用户账号同步,能够快速积累客户、会员数据分析、智能转化客户、有效提高销售、会员维护、网络营销的一款企业应用

评论

发布
暂无评论
15 行代码在 wangEditor v5 使用数学公式