tinymce是一个常用的富文本插件
我们有个需求是在这富文本中支持编辑数学公式的功能。
百度了一波，发现了两种方案：
1.kityformula-editor
2.mathjax
区别：
第一种方案是将使用他提供的编辑器输入，然后将输入界面截屏转换为base64图片做保存，同时给img增加属性data-latex用来描述这个数学公式以便在他的编辑器中回显，我们最终得到的就是一个包含标签的字符串。
例如：'<p><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAD0AAAA1CAYAAADyMeOEAAAAAXNSR0IArs4c6QAAAexJREFUaEPt2M+LjWEUwPHPRElkR5FsZycWWIhs2FhZMRmlxEbyY2UnkQUhC0VMmUbJZnbIH6DEzo4sLJT8KCKhFD11FEIz6j337bnPXb/3Ped7vuc+9zlnxBB+RoaQWYMeFuvNdDNdcQVae1cs9xe0ZrqZrrgCrb0rltsOstbeCe09H3ux9S+xrmOq6zwyTc/FfjzFfRzERezDVbzoGvbH+zOhF2A5nmANNoTVAn8KH2uE/rnQh/AIz7Ebx/G5ZuilOItjWIJdOIxPNUPvwboAXYUTGMPLWqEX4RLuYhKjmIgCPKwVOovrn3EyT+9eAJckGnRHKlb+53vLX1onnwzTm7Bwltm/woNZfmfGj2dAzziZrAcbdFKlyx28XFDeYC3e4xzeJcVPP73nxFR1L+7e83Aa33A06/6d3d7LYqQ8iQ9hdjPOYDseZ9jOhl6Ba7iBKwG4HnewJebszrmzof8EtBPjMWKmDB2Dhl4c25Np3IzfdtWmy/roSICex9fOaSPAoEyXuDtQDrYLmcCDHDg2YnW0djFcdmav8SzD9iBMl8VBuY+XU/xLTHoHcDs2pZ1zZ0OXg+sytv1Gdit2ZW87J27zdEaJexIju717gd2ge6EhIYlmOqHIvQjRTPdCQ0ISzXRCkXsRYihNfwcIdkI2xmqsKwAAAABJRU5ErkJggg==" data-latex="\\frac {\\pi } {2}"></p>'
第二种方案是需要学习一种特殊的语法，通过这种语法可以用其加载器加载出特定字体，将数学公式的字符串转换为特定字体来显示到页面上。
对比了一下两种方案，我们认为第一种使用自带编辑器转换图片的方案学习成本是低于第二种方案的，因为第二种方案需要学习一直新的语法，对于普通人来说并不容易接受和理解。
于是我们开始研究kityformula-editor方案！
这个方案是将kityformula-editor的包下载解压后放到tinymce目录的plugins下面，然后在tinymce的init方法中配置plugins和toolbar（将'kityformula-editor'加进去）。这样就能在原先tinymce的工具条里看到“公式”这个选项了。
富文本界面
内置的编辑器组件
说一下我们在使用的过程中遇到过一些问题：
① 图片不上传，直接使用base64会提示图片上传失败
② 新建完公式以后生成的base64的图片双击无法重新编辑，官方示例里是可以双击二次编辑的
③ 公式创建完成以后保存下来的字符串，回显时无法正确回显（研究发现是data-latex中的\被误认为是转义字符了）
三个问题的解决方案：
① 将init中加入automatic_uploads: false，禁止图片自动上传我们只使用base64记录图片，我们也尝试过万一其他图片需要上传怎么办，后来发现这个base64图片的配置确实会影响到其他正常上传的图片。也就是说要么都用base64，要么都上传到服务器，不过我们肯定是不希望数学公式上传到服务器的，因为我并不需要记录他。
② 在kityformula-editor的包里面有个plugin.js，他的代码第10行对base64图片双击时进行了字符串格式判断，他判断的是整个字符串是一个img标签，然而我们最终得到的是p标签包裹的img以及其他的元素，所以我们直接把这个if判断去掉就可以了。
③ 我们在拿到最终生成的字符串值以后，需要对这个字符串处理一下，将字符串中的\都替换为\\以后再上传给服务器。以下两种方案都可以的：
假设最终拿到的公式字符串存为content，
content.split('\\').join('\\\\')
content.replace(/\\/g,'\\\\')
网友评论