共计 3305 个字符，预计需要花费 9 分钟才能阅读完成。
前言
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 katex | |
| yarn 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 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 vnode | |
| const {value = ''} = elem as FormulaElement | |
| const 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 | |
| // 须要监听的 attr | |
| static get observedAttributes() {return ['data-value'] | |
| } | |
| constructor() {super() | |
| const shadow = this.attachShadow({mode: 'open'}) // Shadow DOM | |
| const 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' 变动时，从新渲染 DOM | |
| attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {if (name === 'data-value') {if (oldValue == newValue) return | |
| this.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
