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