Html+Css+JavaScript實現網頁方程式編輯器(一)

最近一直在做網頁版的方程式編輯器，現在進度過半，我來總結一下這段時間開發網頁方程式編輯器的經驗。

 

開始開發之前，我在網上搜集了大量網頁公式方面的資料，現在比較流行的網頁公式都是用MathML：數學置標語言（Mathematical Markup Language，MathML），是一種基於XML的標準，用來在互連網上書寫數學符號和公式的置標語言。JsMath：是一種在網頁中顯示數學公式的方法，通過解析 TeX 代碼，結合 JavaScript 和 CSS 以及 unicode 字型 來顯示數學公式，支援多瀏覽器和平台，無需 MathML 支援。諸如此類的技術還有，在此就不一一列舉。

 

經過分析這些公式方法，發現他們各有優缺點，譬如有的方法最後公式產生為一張圖片，雖然圖片不大可以忽略網路傳輸的壓力，但是一張數學試卷上面得有多少這樣的小圖片，而且修改也不方便。雖然有的方法可以載入一個第三方的CSS來達到網頁顯示編輯的目的，但是跨瀏覽器的表現也不盡如人意。有的還需要安裝外掛程式才能正常顯示。

 

Html+Css+ JavaScript實現非圖片的、線上網頁編輯器理念應運而生。這樣實現的網頁編輯器屏蔽的圖片實現的缺點，方便修改。於是，便開始分析《運籌學》此書中用到的公式以及特點。

 

以下摘取同事在開發方程式編輯器的時候的總結：“公式輸入或者書寫，都是由左向右由下向上的。整體結構在閱讀時也是遵循這樣的規律的。.但是對於特殊的字元還要區分手寫和大寫，在公式前面可能會有屬性限定例如:Max Min …雖然不涉及運算但是不能缺少的一個首碼。不同運算子各個項的比例不一樣。括弧輸入的同時也需要獨立一個項可以在括弧外附加上下標。.為了不影響輸入希望有插入設定能不在對整體改動的情況下對細節進行修改，方便輸入答案的時候不因為修改細節而影響過多時間。”

 

吸取這位仁兄的總結，以及專案經理的建議，我把數學公式中分數、幾次方、根號、積分等方法歸為一個。

 

這九個方塊就可以滿足大部分的公式要求。我們把1號位置，叫做操作符，公式方法根據1號位置的符號來進行位置移動。例如：分數，1號位置為分數線，2號位置為分子，4號位置為分母。這樣分數的大致形態就出來了，然後在進行位置的微調便可達到。積分：1號位置為積分符號，3、6、7分別為數值，這樣實現了積分。

在html中，我們選用了span來表示方塊。我們參考了MathML中的文法：

如：MathML中顯示一個的代碼如下：

 

 1 <math> 2  <mrow> 3   <mi>x</mi> 4   <mo>=</mo> 5   <mfrac> 6     <mrow> 7       <mrow> 8         <mo>-</mo> 9         <mi>b</mi>10       </mrow>11       <mo>&PlusMinus;</mo>12       <msqrt>13         <mrow>14           <msup>15             <mi>b</mi>16             <mn>2</mn>17           </msup>18           <mo>-</mo>19           <mrow>20             <mn>4</mn>21             <mo>&InvisibleTimes;</mo>22             <mi>a</mi>23             <mo>&InvisibleTimes;</mo>24             <mi>c</mi>25           </mrow>26         </mrow>27       </msqrt>28     </mrow>29     <mrow>30       <mn>2</mn>31       <mo>&InvisibleTimes;</mo>32       <mi>a</mi>33     </mrow>34   </mfrac>35  </mrow>36 </math>

我們實現剛才那個分數和積分的代碼如下：

 1 分數： 2 <span math='frac' mathroot='true'> 3 　　<span></span> 4 　　<span>2</span> 5 　　<span>4</span> 6 </span> 7  8 積分： 9 <span math='integral3' mathroot="true">10 　　<span></span>11 　　<span>3</span>12 　　<span>6</span>13 　　<span>7</span>14 </span>

由此可以發現，我們的html代碼十分簡潔，只有開頭span中表示它是一個數學公式和它是一個什麼公式，瀏覽器便可以識別出它來。

下面是這兩個方法在瀏覽器中的樣子（比例有所放大）：

 

分別在IE8，Chrome19，Safari5.1.7測試…

 

今天稀裡糊塗說了一大堆，各位看官可能發現最重點的JS實現沒有說出來，說實話，鄙人的JS知識淺薄，需要整理一下思路，欲知後文如何，各位看官且聽下回分解...

 

 

PS：自己看了一遍，發現這一篇廢話連篇，就是一個設計思路，重點如何?思路大體說出來了，但是在具體一些還未涉及，後面如何寫還有待深思熟慮啊...小生今年剛剛畢業參加工作，是一個90後的程式員，還需要前輩們多多拍磚啊...