基于ＭａｔｈＭＬ的在線公式編輯器的實現(xiàn)與應用

 收稿日期：2007-12-15；

修回日期：2008-03-04

基金項目：國家“十一五”科技支撐計劃重大資助項目(2006BAH02A24);國家教育部/外國專家局高等學校學科創(chuàng)新引智計劃資助項目(B07042); IBM大學合作項目(SUR2006)



作者簡介：

郭威（1983-），男，湖北孝感人，碩士研究生，主要研究方向為知識服務（weiguo031@163.com）；劉三

（1973-），男，安徽桐城人，副教授，博士后，主要研究方向為知識服務、人工智能；楊宗凱（1963-），男，河南鄭州人，教授，博導，主要研究方向為網(wǎng)絡教育標準與技術、現(xiàn)代通信網(wǎng)絡、智能信號處理；孫建文（1983-），男，重慶人，博士研究生，主要研究方向為知識服務；劉林（1983-），男，四川合江人，碩士研究生，主要研究方向為知識服務.

（華中師范大學 教育信息技術工程研究中心 武漢 430079）

摘要：

在闡述了數(shù)學標記語言MathML和公式插件WebEQ的基礎上，提出了一種基于MathML的在線公式編輯器的設計，并以文本編輯器FCKeditor為平臺進行了實現(xiàn)，最后給出了具體應用與進一步的改進，較好地解決了上述問題。

關鍵詞：數(shù)學標記語言； WebEQ； 在線公式編輯器； 實現(xiàn)； 應用

中圖分類號：TP391

文獻標志碼：A

文章編號：1001-3695(2008)10-3177-04

Implementation and application of MathML-based on-line formula editor

GUO Wei LIU San-ya YANG Zong-kai SUN Jian-wen LIU Lin

(Engineering Research Center for Education Information Technology Central China Normal University Wuhan 430079 China)

Abstract:In the Web-environments how to input，edit，transmit and display math formula on-line has become one of the most difficult problems to develop e-learning and network examination on math and science subjects. After the expatiation of MathML and WebEQ this paper presented a design of MathML-based on-line formula editor and realized it on the platform of FCKeditor. Finally gave some applications and improvements which resolved the above difficulty efficiently.

Key words：MathML; WebEQ; on-line formula editor; implementation; application

0引言

隨著Internet的快速發(fā)展，越來越多的人通過Web發(fā)布、獲取和管理知識。數(shù)理公式作為知識體系中的重要組成部分，在基于Web的網(wǎng)絡教學、信息發(fā)布、學術交流等方面起著非常重要的作用，特別是在一些遠程教學和網(wǎng)絡考試系統(tǒng)中，在師生互動討論、教師輸入試題、學生解答試題等關鍵環(huán)節(jié)，在線輸入、編輯、傳輸和顯示數(shù)理公式已成為一種十分迫切的要求[1]。然而在目前的Web環(huán)境下，由于數(shù)理公式自身的復雜性以及目前Web中HTML對各種數(shù)理符號特殊標記的支持非常有限，有關數(shù)理公式的輸入、編輯、傳輸和顯示問題一直困擾著廣大師生。目前，解決此類問題的方法主要有以下四種[2]：

a）圖片法。Web發(fā)布者先通過MathType等客戶端公式編輯器來編輯公式并將其轉換為圖片（JPG或JIF格式），然后嵌入到HTML網(wǎng)頁中，最后公式以圖片的形式在客戶端的瀏覽器中顯示。這種方式的缺點有：若發(fā)布者要更改公式，必須重新繪制公式的圖片；訪問者不能獲取公式的語義，也不能編輯公式。

b）專用的數(shù)學公式的瀏覽器插件。有些公司為了配合本公司自己的教學軟件或教學網(wǎng)站，設計了專用的插件。訪問者要觀看數(shù)理公式，必須先要下載這些專用的瀏覽器插件。這種方式的主要缺點有公式復用性差；軟件獨立性差。

c）使用LaTex。LaTex是一套基于習慣性書寫思維的數(shù)學公式表示方法，一些大的軟件公司開發(fā)出一些專用的LaTex瀏覽器插件，通過這種方式，瀏覽器可以直接觀看嵌入在HTML中的公式符號。這種方式的優(yōu)點是LaTex文檔的操作簡潔，復用性好；缺點是LaTex不是一種標記語言，在網(wǎng)絡應用和數(shù)據(jù)的格式化標準化方面的擴展能力較差。

d）基于MathML的應用。MathML是W3C組織制定的一套基于XML 的數(shù)學公式處理的標準。作為一種標記語言，MathML在設計之初就考慮到網(wǎng)絡上的應用和集成，所以MathML在Web上具有非常廣泛的應用前景。

分析比較以上四種方法可以發(fā)現(xiàn)，盡管前三種方法在某些特定的情景下可以解決數(shù)理公式的顯示問題，但其在公式的在線輸入和編輯方面仍然存在較大的局限性，在標準化方面也沒有形成統(tǒng)一的標準。作為XML的一種應用，MathML繼承了XML的大部分優(yōu)點，已成為Internet上最重要的數(shù)學公式標準，具有廣泛的應用前景。本文提出的一種在線公式編輯器的設計與實現(xiàn)，正是以MathML為基礎，較好地解決了在線輸入、傳輸、顯示數(shù)理公式的難題。

1MathML與WebEQ 

1.1數(shù)學標記語言MathML

Web技術和XML的快速發(fā)展推動了數(shù)學信息的表示、存儲以及傳輸方式，提出了使用XML來描述數(shù)學表達式的理念，于是MathML誕生了。數(shù)學標記語言MathML (mathematical markup language)[3]是由國際互聯(lián)網(wǎng)標準組織W3C提出的，是針對Web上數(shù)學信息的使用而研制和發(fā)展起來的一套基于XML的數(shù)學信息規(guī)范 是計算機之間交換數(shù)學信息的基本標準。它完全采用XML的定義規(guī)范，繼承了XML的大部分優(yōu)點，具有強大的數(shù)學公式表達能力。 

MathML提供兩種描述數(shù)學公式的標記：a)呈現(xiàn)型標記(presentation markup)，用來描述數(shù)學表達式的二維布局結構，它更注重表達式的顯示方式[4]；b)內(nèi)容型標記(content-markup)，用來描述數(shù)學公式的邏輯內(nèi)容，它更關注表達式的內(nèi)在含義。

MathML語言規(guī)格1.01版于1999年7月公布，2003年10月發(fā)布了MathML 2.0。MathML 2.0是一個XML應用，它支持在Web頁面正確顯示數(shù)學符號和在應用之間傳遞數(shù)學符號。在2007年4月底，W3C就其數(shù)學標記語言MathML發(fā)布了一個新的工作草案版本——3.0版。MathML 3.0中最有趣的工作稱之為面向內(nèi)容的標志。 

1.2WebEQ

MathML通過標記元素的各種屬性控制數(shù)學表達式的動態(tài)交互過程，但對于一般用戶而言，直接使用MathML并不方便，要簡易地創(chuàng)建動態(tài)數(shù)學網(wǎng)頁，可以使用一些插件。 Design-Science下的WebEQ就是一種不錯的選擇。WebEQ開發(fā)包提供了編輯動態(tài)數(shù)學應用程序和MathML代碼的Java工具和相關組件，主要由WebEQ editor、WebEQ publisher、WebEQ library以及四個Java applets(input control、viewer control、graph control、service provide)組成[5]。本文第2章有關在線公式編輯器的實現(xiàn)正是利用了InputControl和ViewerControl這兩個Java applet分別完成了數(shù)理公式的在線輸入和顯示。

WebEQ InputControl是一個功能上等同于客戶端公式編輯器的Java applet，它被嵌入到Web頁面中顯示，用戶可以直接在線輸入和編輯公式。它的最大優(yōu)點是所見即所得，即用戶在呈現(xiàn)的公式面板上選擇對應的公式模板，再經(jīng)過簡單編輯即可得到所需的公式。這種方式簡潔易用，與操作WebEQ-editor、MathType等客戶端公式編輯器一樣方便。

運用WebEQ InputControl，人們可以方便地在線輸入數(shù)理公式，而要使這些公式在Web頁面上顯示出來，還要用到WebEQ ViewerControl。該applet調(diào)用ViewerControl.class類來解析MathML代碼，并將代碼所對應的公式在頁面上顯示出來。

WebEQ插件包括WebEQ InputControl和WebEQ ViewerControl，用于在瀏覽器中輸入、顯示數(shù)理公式，支持MathML和WebTex。由于WebEQ插件以Java語言和MathML技術為基礎，它與平臺和瀏覽器無關。可以預見，隨著互聯(lián)網(wǎng)的發(fā)展和MathML規(guī)范的完善，WebEQ插件在Web上顯示和處理數(shù)學表達式的應用將會越來越廣泛[6]。但在目前有關WebEQ插件的應用也并非完美，問題之一便是各種插件的應用之間缺少整合，集成度不高。單獨使用WebEQ InputControl可以完成公式的輸入，但公式無法在網(wǎng)絡上進一步傳輸和顯示；單獨使用WebEQ ViewerControl可以完成公式的顯示，但要求使用者具備一定的MathML的知識，并且當要顯示新公式時必須重新更改MathML代碼，靈活性差。為了克服孤立地使用這些插件帶來的局限性，本文提出的在線公式編輯器將WebEQ的兩種應用整合到同一平臺上，使公式的輸入、傳輸、顯示流線型地完成，并成功應用到實際系統(tǒng)中，提高了應用的靈活性和擴展性。

2在線公式編輯器的設計與實現(xiàn)

2.1設計

利用WebEQ插件下的InputControl和ViewerControl這兩個類可以分別實現(xiàn)數(shù)理公式的輸入和顯示功能，但要實現(xiàn)真正的在線公式編輯，必須將這兩者結合起來。要實現(xiàn)這樣的一個在線公式編輯器，本文主要的設計思路是：a)開發(fā)一個公式編輯的頁面，該頁面要能夠完成所見即所得地輸入公式，自動獲取輸入公式的MathML代碼以及解析MathML代碼將公式顯示出來等功能；b)將該頁面作為一個接口嵌入到一般的文本編輯器中，以進一步擴展公式的編輯和傳輸功能[7，8]。

筆者選取目前應用十分廣泛的開源在線文本編輯器FCKeditor作為開發(fā)平臺。首先，在FCKeditor上增加一個新的工具欄作為公式編輯的接口，當用戶需要輸入公式時，點擊該工具欄，系統(tǒng)將調(diào)用JavaScript啟動公式編輯的頁面，彈出一個公式編輯窗口；當用戶在公式面板中所見即所得地輸入公式后，點擊窗口下端的確定按鈕，頁面能自動獲取到輸入公式所對應的MathML代碼；利用WebEQ插件的ViewerControl類來解析代碼；最后將公式在FCKeditor的編輯框中顯示出來，再作進一步的編輯和傳輸。整個的工作流程如圖1所示。

2.2實現(xiàn)

本節(jié)將給出具體的實現(xiàn)過程：首先需要下載兩個軟件，即開源文本編輯器FCKeditor（筆者使用的版本為2.4.3）和WebEQ插件WebEQApplet.jar。FCKeditor是一款功能強大的在線文本編輯器，而且它是輕量級的，無須任何形式的安裝，移植性強。WebEQApplet.jar包中有兩個需要用到的class類:InputControl和ViewerControl，分別用來輸入和顯示數(shù)理公式。下載并解壓FCKeditor_2.4.3.zip得到fckeditor，保留editor文件夾及fckconfig.js、fckeditor.js、fckstyles.xml、fcktemplates.xml四個文件，其余的文件和文件夾均可刪除。在fekeditor文件夾下，修改fckconfig.js、zh-cn.js、fckeditorcode_gecko.js和fckeditorcode_ie.js四個文件，為FCKeditor增加一個新的工具欄——插入公式。若要為該工具欄附上圖標，可用圖像處理軟件對圖片文件fck_strip.gif作適當?shù)木庉嫼托薷摹＿@樣，就為FCKeditor調(diào)用公式編輯頁面提供了一個接口。

圖2為FCKeditor所有工具欄的截圖。其中包括新增的工具欄插入公式。

接下來需要實現(xiàn)這個接口。在文件夾dialog下新建文件夾fck_ formula，在fck_formula下新建formula.html頁面，同時將WebEQApplet.jar放到fck_formula下。這里，…\\dialog\\fck_ formula\\formula.html即為新增工具欄調(diào)用公式編輯頁面的路徑，也即formula.html頁面是控制在線輸入和顯示公式的樞紐。以下是formula.html頁面的一些關鍵代碼及其說明：

〈applet archive=″WebEQApplet.jar″ code=″Webeq3.editor.InputControl″ codebase=\".\"width=″690″ height=″200″ name=″myApplet″″〉

〈param name=″useslibrary″ value=″WebEQApplet″〉

〈param name=″useslibrarycodebase″ value=″WebEQApplet.cab″〉

〈param name=″useslibraryversion″ value=″3，7，0，0″〉

〈/applet〉

這是一個Java applet，該applet調(diào)用WebEQApplet.jar包中的InputControl類，展現(xiàn)出一個所見即所得的公式編輯環(huán)境，供用戶輸入公式。這里需要注意的是，codebase指示的是WebEQApplet.jar包與公式編輯頁面的相對位置，本例中兩者在同一文件夾下。圖3顯示的是在線輸入數(shù)理公式的截圖。

〈form〉

〈input type=″button″ value=“確定” onclick=″check()″/〉

〈/form〉

這行代碼是在applet的下面增加了一個確定按鈕，當公式輸入完畢，點擊確定執(zhí)行check()中的代碼，完成公式的顯示。

以下是顯示公式的一段腳本，包括check()函數(shù)的實現(xiàn)：

〈script type=″text/javascript″〉

var oEditor=window.parent.InnerDialogLoaded();

/*取得父窗口對象——FCKeditor文本編輯器*/

function check()

{

var mml_txt=document.myApplet.getPackedMathML(); 

/*獲取公式對應的MathML代碼*/

var head=″〈applet archive=\\″WebEQApplet.jar\\″ codebase=\\″/TestFCKeditor/FCKeditor/editor/dialog/fck_formula\\″ code=\\″Webeq3.ViewerControl.class\\″ width=\\″200\\″ height=\\″60\\″ align=\\″middle\\″〉

〈param name=\\″useslibrary\\″ value=\\″WebEQApplet\\″〉

〈param name=\\″useslibrarycodebase\\″ value=\\″WebEQApplet.cab\\″〉

〈param name=\\″useslibraryversion\\″ value=\\″3，7，0，0\\″〉

〈param name=\\″eq\\″ value=\\″ ″; /var tail=″ \\″〉

〈param name=\\″foreground\\″ value=\\″black\\″〉

〈param name=\\″background\\″ value=\\″white\\″〉

〈param name=\\″selection\\″ value=\\″true\\″〉

〈param name=\\″parser\\″ value=\\″mathml\\″〉

〈param name=\\″size\\″ value=\\″12\\″〉〈/applet〉″;

var dis_mml=head+mml_txt+tail;

/*包含MathML代碼的完整的applet*/

oEditor.FCK.insertHtml(dis_mml ||″ ″) ;

/*在FCKeditor編輯器中運行applet，顯示公式*/

window.parent.cancel() ;/*關閉公式編輯窗口*/

}

〈/script〉

這段腳本語言的主體是函數(shù)check()，它獲取公式對應的MathML代碼，將MathML嵌入到applet中，在FCKeditor編輯框中運行applet顯示公式。注意這里的applet中調(diào)用的類為WebEQApplet.jar包中的ViewerControl.class。還有一點要特別注意：此時codebase指示的是WebEQApplet.jar包與公式顯示頁面的相對路徑，而不是與公式輸入頁面的相對路徑。在實際的整合應用中，由于公式的顯示頁面不確定，這里的codebase最好為WebEQApplet.jar包與服務器根目錄之間的絕對路徑。這樣，不管公式的顯示頁面跳轉到何處，通過該codebase總能夠找到WebEQApplet.jar包來解析MathMl代碼，以正確地顯示公式。圖4是公式編輯頁面中輸入的公式在FCKeditor中的顯示。在編輯框中，還能對公式的位置、大小等再次進行編輯，之后再在網(wǎng)絡上進行傳輸。

3在線公式編輯器的應用與改進

在遠程教學和網(wǎng)絡考試系統(tǒng)中，師生互動討論、教師編輯試題、學生解答試題等已經(jīng)成為必不可少的關鍵環(huán)節(jié)。然而，目前的系統(tǒng)大都采用一般的文本編輯器來供用戶進行文本編輯，這些編輯器可以完成對字符、圖片、動畫等內(nèi)容的輸入和編輯工作，但對數(shù)理公式的支持卻非常有限，嚴重制約了數(shù)理學科開展網(wǎng)絡教學和網(wǎng)絡考試。筆者以FCKeditor為平臺對在線公式編輯器作了一般的實現(xiàn)。在此，將在線公式編輯器應用到網(wǎng)絡教學和考試系統(tǒng)中，較好地解決了在線輸入、編輯、傳輸和顯示數(shù)理公式的難題。這里以開源教育軟件LAMS（學習活動管理系統(tǒng)）為例進行講解。

LAMS是一個以活動為中心的學習管理系統(tǒng)，教師用戶可以設計學習序列來供學生用戶進行學習。教師在設計學習序列、學生在回答教師提出的問題以及在線討論等活動中都需要在線地編輯文本。在原系統(tǒng)中，教師用戶和學生用戶分別使用FCKeditor和Textarea編輯器來編輯文本。這兩種編輯器可以對一般的文本進行編輯，但不支持數(shù)理公式的輸入和編輯，筆者將在線公式編輯器應用到LAMS中成功地解決了這個問題。

對教師用戶而言，由于原系統(tǒng)提供的編輯器是FCKeditor，本文設計的在線公式編輯器也是以FCKeditor為平臺；此外，F(xiàn)CKeditor具有免安裝、移植性強的特點，因此，直接用在線公式編輯器替換原系統(tǒng)安裝目錄下的FCKeditor即可。新的在線公式編輯器除了具有FCKeditor原有的所有功能外，還新增了公式輸入和編輯功能。教師用戶可以利用在線公式編輯器設計包括數(shù)理公式在內(nèi)的學習序列，然后保存在數(shù)據(jù)庫中，供學生用戶在客戶端學習。

對學生用戶而言，原系統(tǒng)提供的編輯器是Textarea，只能進行最基本的文本編輯。為了擴展編輯器的功能，先找到相應的JSP頁面，然后用在線公式編輯器替換原來的Textarea編輯框。調(diào)用在線公式編輯器的代碼如下：

〈script type=\"text/javascript\" src=\"http://172.16.129.158:8090/

lams/fckeditor/fckeditor.js\"〉〈/script〉

〈script type=\"text/javascript\"〉

var oFCKeditor=new FCKeditor(′entryText′);

/*entryText為原來Textarea的標志符*/

oFCKeditor.basePath= \"http://172.16.129.158:8090/lams//fckeditor/\"; //FCKeditor的路徑

oFCKeditor.height=200; /*編輯框的高度*/

oFCKeditor.toolbarSet=\"Default\";

/*工具欄的設置：Default或Basic*/

oFCKeditor.value=′content′; /*編輯框的默認值*/

oFCKeditor.config[\"AutoDetectLanguage\"]= 1;

oFCKeditor.config[\"DefaultLanguage\"]= \"zh\";

oFCKeditor.create();

〈/script〉

這樣，學生用戶在學習序列時就可以非常方便地輸入包括數(shù)理公式在內(nèi)的內(nèi)容，完成與教師的交互。例如，圖5顯示的是學生在線回答教師的提問；圖6顯示的是學生（或教師）在論壇上發(fā)表觀點；圖7顯示出了論壇上發(fā)表的各種觀點，這些過程對數(shù)理公式都有很好的支持。由此可以看出，運用本文提出的在線公式編輯器，不僅可以在線地輸入和編輯數(shù)理公式，而且可以實現(xiàn)公式的在線傳輸和顯示。

此外，還可以對在線公式編輯器作進一步的改進，以滿足不同情景下的應用需求。例如，要調(diào)整編輯器工具欄的外觀，可以對文件fckconfig.js進行修改，這里設置FCKConfig.toolbarSets[\"Basic\"]=[[′FontSize′，′Bold′，′Expression′]]；然后在調(diào)用在線公式編輯器時設置oFCKeditor.toolbarSet=\"Basic\"；則在線公式編輯器只包含三個工具欄，即字體大小、加粗和插入公式。其外觀如圖8所示。

同理，要使用其他的工具欄，只需將其對應的標簽添加到toolbarSets中即可。另外，在網(wǎng)絡考試系統(tǒng)中，還可以根據(jù)頁面布局來調(diào)整編輯器的高度和寬度，以滿足填空題和解答題等不同題型解題的需要。

4結束語

隨著網(wǎng)絡教育的迅猛發(fā)展，在線輸入、編輯、傳輸和顯示數(shù)理公式已成為一種十分迫切的需求。本文首先介紹了支持國

際標準的數(shù)學標記語言MathML以及全面支持MathML來輸入和顯示數(shù)理公式的WebEQ；在此基礎上提出了一種基于MathML的在線公式編輯器的解決方案，最后給出了具體實現(xiàn)與應用。與一般采用的客戶端公式編輯器的解決方案相比，本文提出的解決方案除了具有客戶端公式編輯器操作簡便的特點以外，其最大的優(yōu)勢在于能夠實現(xiàn)在線操作，完全支持Web應用，這是一般的客戶端公式編輯器所無法企及的；與一般離散地運用WebEQ來分別完成公式的輸入、顯示等解決方案相比，本文的解決方案將多種應用整合起來集成在一個模塊中，使公式的輸入、傳輸、顯示流線型地完成，而且這種整合是無縫的，完全屏蔽了其內(nèi)部實現(xiàn)細節(jié)，使用者無須任何MathML知識即可方便地使用這種基于MathML的在線公式編輯器。

目前，該在線公式編輯器作為一個組件集成于LAMS和網(wǎng)絡考試系統(tǒng)中，成功地解決了系統(tǒng)中在線輸入、傳輸、顯示數(shù)理公式的難題，借助于FCKeditor平臺，對公式的編輯也有一定的支持。此外，該公式編輯器操作簡單、使用靈活、運行穩(wěn)定，具有良好的移植性和擴展性，支持各種通用瀏覽器，能夠實現(xiàn)跨平臺工作，取得了較好的應用價值。

參考文獻：

[1]SMITH G G GRACKIN J ERGUSON D. Math and distance lear-ning threaded discussions[EB/OL].(2002)[2007-12-05].http://www.link-systems.com/ext_PNqUdT9CiqIAADkeBh4/GlennSmithEDMedia42902.pdf.

[2]歐陽辰.數(shù)學公式與Web[J].計算機工程與應用，2001，37(17):89-92.

[3]Mathematical markup language(MathML) version 2.0[EB/OL].2nd ed.(200-10-02)[2007-12-05].http://www.w3.org/TR/2003/REC-MathML2-20031021/.

[4]WATT S M LI Xue-hong. Examples of MathML[EB/OL].(1999)[2007-12-05].http://www.csd.uwo.ca/~watt/pub/reprints/1999-sigsam-mathml.pdf.

[5]ITOH K. Designing a learner-friendly formula- editor for computer-assisted learning[EB/OL].(2006-06-30)[2007-12-05].http://www.et.hs-wismar.de/ausland/japan/docs/C_Formula_editor.pdf .

[6]童寧江，古輝.WebEQ插件相關技術綜述[J].中國科技信息，2007，19(6):149-150.

[7]張濱. 實現(xiàn)Web下公式符號在線操作的可視化編輯器系統(tǒng)的設計[J].計算機科學，2007，34(6):286-288.

[8]劉瓊華.采用標記語言構造數(shù)學公式編輯器的方法[J].計算機工程，2003，29(18): 82-83，121.