背景
公司做教育行业的，需要数学公式和化学反应方程式的录入。之前项目一直在用wiris的公式编辑，功能很强大，支持粘贴图片识别，手写识别，以及多种输出格式。但是wiris服务器在国外不太稳定，而且还是收费的，前段时间不忙就想着调研一下，能不能基于开源的项目打造一个适合自己项目的编辑器。项目的富文本编辑器是tinymce5，需要封装为tinymce插件。
需求
需要同时支持这三种数据格式：MathMl、Latex、SVG。
- SVG的特性适合用来在不同设备上展示，不需要其他依赖；
- mathml主要是wiris的保存和编辑的格式；
- Latex是数学较为通用的格式，方便以后拓展；
- 尽量避免与服务器交互，在本地完成，提升速度；
主要难点
- 可视化的编辑方式，对Latex和MathMl不熟悉的用户也可以编辑公式。
- 公式转化为SVG格式，以便于不同设备有更好的显示效果。
- 自己对Latex和MathMl不熟悉，如何编辑，如何支持原有的wiris的输入内容。
调研
-
Equation Editor 提供了点击对应符号输入的方式，支持tinymce集成，但用户编辑修改时需要从Latex公式中找出需要修改的内容，对用户不友好。
-
Math-Live 开源，有图形化编辑界面，编辑对用户友好，支持多种格式，各种宏，可自定义，拓展性好。缺点是不持支生成SVG，主要是面向移动设备的用户，但对PC也相比较友好。
-
kityformula-editor 现成的tinymce插件，不需要做改动，但是一些Latex公式缺失，在Github上发现该项目在11年前已经停止更新，并且没有说明文档；
-
还有很多在线编辑的Latex公式编辑，虽然不能拿来用，但也具有参考价值。
最后决定使用Math-Live，转换成SVG的话可以使用MathJax来实现(也找过其他库，踩了不少坑)。MathJax是现在比较权威的库，功能也比较强大，支持导入其他宏，并且能自动加载宏识别渲染Latex(虽然我用不上，但还是得夸一下)。
实现
接下来开始啃源码，发现Math-Live的文档很全面，非常好的一个项目。其中也内置了许多宏，支持的Latex是非常全面的。输入方式支持原生输入，shift切换，快捷键操作，鼠标右键点击事件处理，非常强大。唯一不太好的一点是公式比较复杂的时候鼠标点击不能很好的定位光标位置（由于本人太菜最后也没弄明白其怎么实现的），只能通过键盘的上下左右来操作。
然后确认需要改动的内容：
- 键盘：屏蔽键盘收起功能使其常驻，重写部分快捷键操作，实现换行和快捷输入功能。
- 调整键盘和输入框样式，以及部分元素布局。
- 根据业务场景对Latex符号进行分类，补充一些特殊符号，按键布局和样式。
- 实现元素周期表，以及化学反应方式的录入所需的符号和快捷操作。
- 其他细节调整（改的多了，就忘了改了啥）
改完之后进行打包，手写一个Tinymce插件引入MathLive和MathJax封装成插件，实现插入SVG图片,双击再次编辑，并支持对原wiris录入的公式进行编辑，配置MathJax使其默认支持一些特殊符号的转换。
最后还需要修改下项目中的tinymce组件，使其同时兼容两种插件的逻辑。
说起来简单，踩坑也是真的多，人都麻了，不过DeepSeek真的强帮助我解决了不少问题，提出表扬。下面看看效果
最后
耗时一个月基本完成，经过一些细节的调整和优化，今天准备上线开发部分用户使用权限进行线上测试，根据用户反馈再进行调整。相对于wiris来说全部操作都在客户端完成，大大提高了相应速度，并且交互上比wiris上更友好，化学方程式录入比wiris更方便，不足的地方就是不支持截图识别，后期可以通过第三方OCR识别来实现（目前也有成熟的API可以直接识别图片转换为Latex）。这是自己第一次去对一个开源项目全面了解和修改受益匪浅，对开源大佬表示由衷的敬佩。
欢迎大家讨论交流，小菜B敬上！
