wangEditor公式编辑器kityformula + myscript-math-web 很久没更新文章，之前一直

介绍

很久没更新文章，之前一直在CSDN上面写，这次改到了掘金，最近因为工作需要研究了一下富文本编辑器，发现市面上很多编辑器都比较老旧了，故选择了wangEditor，这个项目已经更到了4.X版本，使用了TS进行重构，整个编辑器美观且轻量，在这个基础上加了两个自定义菜单，分别是公式编辑器kityformula和公式手写板myscript-math-web。

踩坑之路

编辑器demo

我是直接clone的项目示例，github地址 github.com/wangeditor-…

运行

git clone https://github.com/wangeditor-team/wangEdior-with-vue.git

kityformula插件

kityformula这个项目有些老了，由于是百度的开源项目，只发现集成到了百度的UEditor，翻看UEditor源码时发现插件采用的是iframe的方式，也就给了我集成进wangEditor 的思路。做的过程中在公式导出的时候费了些时间，原本是使用execCommand('get.image.data'）这个api获取公式生成的base64的图片，由于未知原因我这边一直获取不到，就换了种方式，使用latex的在线公式转图片。内容插入到编辑器时也本该使用editor.cmd.do这个api，但是运行demo时控制台报错导致弹窗无法关闭，所以改用editor.txt.append，我自己的项目运行是没有问题的，不知道是不是因为我自己的项目是ts的原因。

myscript-math-web插件

这个项目的运行需要安装polymer，运行

npm install -g polymer-cli

安装

npm install myscript-math-web

创建index.html文件

<html>
    <head>
        <script type="module" src="node_modules/myscript-math-web/myscript-math-web.js"></script> 
        <script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script> 
        <style>
            myscript-math-web {
                height: 100vh;
            }
        </style> 
    </head>
    <body>
      <myscript-math-web
        applicationkey="YOUR MYSCRIPT DEVELOPER APPLICATION KEY"
        hmackey="YOUR MYSCRIPT DEVELOPER HMAC KEY">
      </myscript-math-web>
    </body>
</html>

需要注意这个插件需要自己申请applicationkey和hmackey，申请的地址是 developer.myscript.com/getting-sta…

填写完必要信息即发送到邮箱，需要在10分钟内在项目内设置运行激活

然后运行即可

polymer serve

如果要放到自己项目中还需要打包

polymer build

就可以在本地打开index.html进行访问了，我自己的的项目已经打包过，giuhub上的示例只需在public - myscriptMath - index.html 中设置applicationkey和hmackey 即可运行

总结

这个两个插件相关资料比较少，还好自己已经逐渐适应阅读源码，根据源码和别人的项目示例可以自己做出来，但在这次学习过程中发现自己的英文阅读能力还需要再进步，对于myscript-math-web这种国外插件，翻阅文档会比较痛苦

wangEditor公式编辑器kityformula + myscript-math-web

介绍

先上完成后的演示

wangEditor

kityformula

myscript-math-web

踩坑之路

编辑器demo

kityformula插件

myscript-math-web插件

总结