美文网首页
vue富文本编辑器支持数学公式尝试

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

作者: 夏日清风_期待 | 来源:发表于2022-04-29 17:48 被阅读0次

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

    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文件。

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

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

    1 2

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

    相关文章

      网友评论

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

          本文链接:https://www.haomeiwen.com/subject/wlpsyrtx.html