tinymce是一個常用的富文本插件
我們有個需求是在這富文本中支持編輯數(shù)學公式的功能。
百度了一波，發(fā)現(xiàn)了兩種方案：
1.kityformula-editor
2.mathjax
區(qū)別：
第一種方案是將使用他提供的編輯器輸入，然后將輸入界面截屏轉換為base64圖片做保存，同時給img增加屬性data-latex用來描述這個數(shù)學公式以便在他的編輯器中回顯，我們最終得到的就是一個包含標簽的字符串。
例如：'<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>'
第二種方案是需要學習一種特殊的語法，通過這種語法可以用其加載器加載出特定字體，將數(shù)學公式的字符串轉換為特定字體來顯示到頁面上。
對比了一下兩種方案，我們認為第一種使用自帶編輯器轉換圖片的方案學習成本是低于第二種方案的，因為第二種方案需要學習一直新的語法，對于普通人來說并不容易接受和理解。
于是我們開始研究kityformula-editor方案！
這個方案是將kityformula-editor的包下載解壓后放到tinymce目錄的plugins下面，然后在tinymce的init方法中配置plugins和toolbar（將'kityformula-editor'加進去）。這樣就能在原先tinymce的工具條里看到“公式”這個選項了。
說一下我們在使用的過程中遇到過一些問題：
? ① 圖片不上傳，直接使用base64會提示圖片上傳失敗
? ② 新建完公式以后生成的base64的圖片雙擊無法重新編輯，官方示例里是可以雙擊二次編輯的
? ③ 公式創(chuàng)建完成以后保存下來的字符串，回顯時無法正確回顯（研究發(fā)現(xiàn)是data-latex中的\被誤認為是轉義字符了）
三個問題的解決方案：
? ① 將init中加入automatic_uploads: false，禁止圖片自動上傳我們只使用base64記錄圖片，我們也嘗試過萬一其他圖片需要上傳怎么辦，后來發(fā)現(xiàn)這個base64圖片的配置確實會影響到其他正常上傳的圖片。也就是說要么都用base64，要么都上傳到服務器，不過我們肯定是不希望數(shù)學公式上傳到服務器的，因為我并不需要記錄他。
? ② 在kityformula-editor的包里面有個plugin.js，他的代碼第10行對base64圖片雙擊時進行了字符串格式判斷，他判斷的是整個字符串是一個img標簽，然而我們最終得到的是p標簽包裹的img以及其他的元素，所以我們直接把這個if判斷去掉就可以了。
? ③ 我們在拿到最終生成的字符串值以后，需要對這個字符串處理一下，將字符串中的\都替換為\\以后再上傳給服務器。以下兩種方案都可以的：
? 假設最終拿到的公式字符串存為content，
? content.split('\\').join('\\\\')
? content.replace(/\\/g,'\\\\')
