Html+Css+JavaScript實現(xiàn)網(wǎng)頁公式編輯器(一)

收藏小管 2017-05-20

展開全文

最近一直在做網(wǎng)頁版的公式編輯器，現(xiàn)在進度過半，我來總結一下這段時間開發(fā)網(wǎng)頁公式編輯器的經(jīng)驗。

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

經(jīng)過分析這些公式方法，發(fā)現(xiàn)他們各有優(yōu)缺點，譬如有的方法最后公式生成為一張圖片，雖然圖片不大可以忽略網(wǎng)絡傳輸?shù)膲毫?，但是一張?shù)學試卷上面得有多少這樣的小圖片，而且修改也不方便。雖然有的方法可以加載一個第三方的CSS來達到網(wǎng)頁顯示編輯的目的，但是跨瀏覽器的表現(xiàn)也不盡如人意。有的還需要安裝插件才能正常顯示。

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

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

吸取這位仁兄的總結，以及項目經(jīng)理的建議，我把數(shù)學公式中分數(shù)、幾次方、根號、積分等方法歸為一個。

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

在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>

我們實現(xiàn)剛才那個分數(shù)和積分的代碼如下：

 1 分數(shù)：
 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>