支持数学公式的富文本编辑器,可能使用场景少吧,很多热门编辑器都不支持,或是使用不方便。
wangeditor5文档
最先尝试的是这个,因为项目本身也在用wangeditor4,在github看到作者说wangeditor5已经支持了,而且不依赖其它的工具,兴冲冲动手。根据官方api插件说明找到了这里,并且按照说明安装@wangeditor/plugin-formula
后确实弄出来了,很简单,但是问题来了,只支持 LateX语法,相信很多人都不知道吧,所以放弃了。
tinymce5文档
也是一个不错的富文本编辑器,可惜官方文档是英文的,标题贴的中文文档说明最高只到5.10.0版本,对于需求来说够用了。最开心的是5.x集成kityformula-editor插件,而且使用方法很简单,那个高兴啊,然而动手了之后发现,公式的图片一直没法出来,尝试了切换版本tinymce
和@tinymce/tinymce-vue
的版本,试了网上说的把插件里的html
文件放到根目录的public
文件夹下然后修改kityformula-editor
里的js文件引用路径也没用,只能放弃。
vue-ueditor-wrap + ueditor + kityformula-plugin
老实讲,ueditor
很久没更新了,不是很想使用,但是为了需求还是尝试下。根据这篇文章成功部署然后弄出来了,这里再贴个自己存的ueditor代码,防止网上的失效了找不到。
需求是满足了,但觉得有个缺点,公式在编辑器里生成的是图片并且可拉伸的,在和文字渲染的时候排版就会有点不太舒服,如下图:
ueditor2
继续尝试
jmeditor
这是一个很旧的支持公式的富文本编辑器,没记错的话2018年后就没有在更新了,使用方式也是直接通过Script
直接引入,但是用的最顺手。代码也传到这里了,里面也有说明,包括封装成.vue
文件。
jmeditor2
问题是这个编辑器太旧了,官方文档都找不到,可惜啊。
所以想到一个方法,从jmeditor
中将公式复制出来,然后粘贴在ueditor
,试了之后发现可行(请忽略排版)。或者哪位技术大佬可以把jmeditor
整合到ueditor
里就更好了。
可能有人会问,为什么不试试把jmeditor
公式弄进tinymce5
和wangeditor5
里呢,其实已经试过了,wangeditor5
无法识别LaTeX
语法,tinymce5
可以识别部分LaTeX
语法,在编辑器内部都有问题更别提到页面渲染了,所以只能放弃。
网友评论