vue富文本编辑器支持数学公式尝试

支持数学公式的富文本编辑器，可能使用场景少吧，很多热门编辑器都不支持，或是使用不方便。

wangeditor5文档

最先尝试的是这个，因为项目本身也在用wangeditor4，在github看到作者说wangeditor5已经支持了，而且不依赖其它的工具，兴冲冲动手。根据官方api插件说明找到了这里，并且按照说明安装@wangeditor/plugin-formula后确实弄出来了，很简单，但是问题来了，只支持 LateX语法，相信很多人都不知道吧，所以放弃了。

wangeditor5

tinymce5文档

也是一个不错的富文本编辑器，可惜官方文档是英文的，标题贴的中文文档说明最高只到5.10.0版本，对于需求来说够用了。最开心的是5.x集成kityformula-editor插件，而且使用方法很简单，那个高兴啊，然而动手了之后发现，公式的图片一直没法出来，尝试了切换版本tinymce和@tinymce/tinymce-vue的版本，试了网上说的把插件里的html文件放到根目录的public文件夹下然后修改kityformula-editor里的js文件引用路径也没用，只能放弃。

tinymce5

vue-ueditor-wrap + ueditor + kityformula-plugin

老实讲，ueditor很久没更新了，不是很想使用，但是为了需求还是尝试下。根据这篇文章成功部署然后弄出来了，这里再贴个自己存的ueditor代码，防止网上的失效了找不到。

ueditor1

需求是满足了，但觉得有个缺点，公式在编辑器里生成的是图片并且可拉伸的，在和文字渲染的时候排版就会有点不太舒服，如下图：

ueditor2

继续尝试

jmeditor

这是一个很旧的支持公式的富文本编辑器，没记错的话2018年后就没有在更新了，使用方式也是直接通过Script直接引入，但是用的最顺手。代码也传到这里了，里面也有说明，包括封装成.vue文件。在使用时必须先引入jquery文件，否则会报错。

jmeditor1

jmeditor2

问题是这个编辑器太旧了，官方文档都找不到，可惜啊。

所以想到一个方法，从jmeditor中将公式复制出来，然后粘贴在ueditor，试了之后发现可行（请忽略排版）。或者哪位技术大佬可以把jmeditor整合到ueditor里就更好了。

1

2

可能有人会问，为什么不试试把jmeditor公式弄进tinymce5和wangeditor5里呢，其实已经试过了，wangeditor5无法识别LaTeX语法，tinymce5可以识别部分LaTeX语法，在编辑器内部都有问题更别提到页面渲染了，所以只能放弃。