基于MathML的數(shù)學(xué)公式編輯器在瀏覽器上的實(shí)現(xiàn)

程文靜(1.湖北工業(yè)大學(xué),湖北 武漢 430068;2.湖北師范學(xué)院 學(xué)報(bào)編輯部,湖北 黃石 435002)

0 引言

隨著Internet的普及，人類已逐漸習(xí)慣通過(guò)互聯(lián)網(wǎng)來(lái)實(shí)現(xiàn)知識(shí)的獲取、管理和交流學(xué)習(xí)。在數(shù)學(xué)教育與各種交流中，通常需要編輯大量的數(shù)學(xué)符號(hào)和公式，但目前Web技術(shù)對(duì)數(shù)學(xué)公式的支持有限，并不能象常規(guī)字符那樣容易在Web中表示。因此，如何在互聯(lián)網(wǎng)上實(shí)現(xiàn)數(shù)學(xué)信息的交流和遠(yuǎn)程數(shù)學(xué)教育成為一個(gè)需要研究的課題。

1 數(shù)學(xué)公式在web環(huán)境中的幾種實(shí)現(xiàn)方式

為了在互聯(lián)網(wǎng)上實(shí)現(xiàn)數(shù)學(xué)公式的輸入、表示和顯示，通常會(huì)采用以下幾種方法來(lái)解決。

1．1 圖片法

將各種公式編輯器生成的目標(biāo)公式轉(zhuǎn)換成圖片文件，然后嵌入到HTML網(wǎng)頁(yè)中，公式以圖片的形式在客戶端顯示。這種方式的缺點(diǎn)是：更改公式需重新生成圖片，訪問(wèn)者不能獲取公式的語(yǔ)義，也不能編輯公式且轉(zhuǎn)換過(guò)程單調(diào)而耗時(shí)。

1．2 專用的數(shù)學(xué)公式瀏覽器插件

有些公司為了配合本公司自己的教學(xué)軟件或教學(xué)網(wǎng)站，設(shè)計(jì)了專用的插件。訪問(wèn)者要觀看數(shù)理公式，必須先要下載這些專用的瀏覽器插件。這種方式的主要缺點(diǎn)是公式復(fù)用性差，軟件獨(dú)立性差[1]。

1．3 使用LaTex

LaTex是一套基于習(xí)慣性書寫思維的數(shù)學(xué)公式表示方法，一些大的軟件公司開發(fā)出一些專用的LaTex瀏覽器插件，瀏覽器可以顯示嵌人在HTML中的公式符號(hào)。這種方式的優(yōu)點(diǎn)是LaTex文檔的操作簡(jiǎn)潔，復(fù)用性好,缺點(diǎn)是LaTex不是一種標(biāo)記語(yǔ)言，在網(wǎng)絡(luò)應(yīng)用和數(shù)據(jù)的格式化和標(biāo)準(zhǔn)化方面的擴(kuò)展能力較差。

1．4 基于MathML的應(yīng)用

MathML是一種描述數(shù)學(xué)符號(hào)的低層語(yǔ)言規(guī)范，以將數(shù)學(xué)符號(hào)包含到網(wǎng)頁(yè)中為目的，來(lái)實(shí)現(xiàn)計(jì)算機(jī)之間的交流提供一種底層的基礎(chǔ)，又稱為數(shù)學(xué)置標(biāo)語(yǔ)言?；贛athML的應(yīng)用,就是在xml頁(yè)面中嵌入MathML語(yǔ)句,來(lái)實(shí)現(xiàn)數(shù)理公式在網(wǎng)絡(luò)上的表示。

目前的研究方法大致有下列幾種：

1)利用WebEQ插件來(lái)實(shí)現(xiàn)數(shù)學(xué)公式編輯[1]。方法是：利用WebEQ的InputContol類在圖形界面中輸入公式，然后由內(nèi)部模塊自動(dòng)生成MathML代碼，再通過(guò)ViewerContol類顯示MathML代碼在客戶端。該方法使用簡(jiǎn)單，但WebEQ是一款需購(gòu)買的插件。

2)利用MathType或WebEQ Editor兩種客戶端公式編輯器輸入公式，然后利用“Export to MathPage”功能轉(zhuǎn)換成Web頁(yè)，來(lái)實(shí)現(xiàn)數(shù)學(xué)公式在互聯(lián)網(wǎng)上的傳輸。此方法缺點(diǎn)是靈活性差。

3)利用Design Science 提供的免費(fèi)組件MathPlayer，在IE上呈現(xiàn)含有 MathML語(yǔ)句的XHTML文檔。MathPlayer用于在網(wǎng)頁(yè)上顯示數(shù)學(xué)公式,客戶機(jī)需安裝此插件。

4)利用Eitan Gurari 的 tex4ht 和 Bruce Miller 的 LateXML這些工具，將數(shù)學(xué)內(nèi)容轉(zhuǎn)換成 Content MathML 和 Presentation MathML，然后嵌入到htm頁(yè)中，缺點(diǎn)是對(duì)于普通有戶而言，不知道該嵌入到程序的哪個(gè)位置。

上述方法，雖然都能實(shí)現(xiàn)數(shù)理公式在網(wǎng)頁(yè)上的表示，但實(shí)現(xiàn)起來(lái)有一定的局限性。為了體現(xiàn)程序的可移植性和復(fù)用性，在軟件設(shè)計(jì)上通常采用插件的形式，在程序中采用嵌入的方法。本文通過(guò)在文本編輯器和在線數(shù)學(xué)公式編輯插件中建立聯(lián)系，以解決數(shù)學(xué)公式在網(wǎng)頁(yè)上的應(yīng)用。此方法操作簡(jiǎn)單，可用于數(shù)學(xué)論壇、留言版等環(huán)境，并能真正實(shí)現(xiàn)遠(yuǎn)程動(dòng)態(tài)建立含數(shù)學(xué)公式的新頁(yè)面。

2 MathML與MathEdit

2.1 數(shù)學(xué)置標(biāo)語(yǔ)言MathML[2]

MathML(Mathematical Markup Language)遵循W3C即萬(wàn)維網(wǎng)聯(lián)盟推薦標(biāo)準(zhǔn)，是一個(gè)標(biāo)記數(shù)學(xué)表達(dá)式的XML(可擴(kuò)展標(biāo)記語(yǔ)言)詞匯表，它包含兩個(gè)子語(yǔ)言：Presentation-MathML和Content-MathML。Presentation-MathML主要負(fù)責(zé)描述數(shù)學(xué)表達(dá)式的布局，Content-MathML負(fù)責(zé)標(biāo)記表達(dá)式的某些含義或數(shù)學(xué)結(jié)構(gòu)。在Web平臺(tái)上的應(yīng)用大都用Content- MathML。由于MathML在瀏覽器中的使用，從最初的設(shè)計(jì)階段開始，MathML 的主要目標(biāo)就是支持?jǐn)?shù)學(xué)表達(dá)式作為文本而不是圖像或插件使用在 Web 頁(yè)面中，以允許搜索、調(diào)整文本大小等。MathML可用在瀏覽器、出版業(yè)、辦公軟件中，甚至可以到TeX、OpenMath、OOMML之間的轉(zhuǎn)換。

2.2 數(shù)學(xué)公式編輯器MathEdit

盡管MathML可以將數(shù)學(xué)公式用標(biāo)記語(yǔ)言來(lái)表示，以實(shí)現(xiàn)公式的輸入、存儲(chǔ)與輸出，但如果用MathML語(yǔ)言來(lái)書寫數(shù)學(xué)公式，其編寫代碼的工作量大且代碼復(fù)雜，往往一個(gè)簡(jiǎn)單的公式需要十幾行代碼，對(duì)于沒(méi)有語(yǔ)言基礎(chǔ)的用戶來(lái)說(shuō)，比較費(fèi)勁。就是有語(yǔ)言基礎(chǔ)，書寫純MathML編碼，也是一件費(fèi)心的事情。如何能在網(wǎng)絡(luò)上所見即所得地輸入公式，成為一個(gè)很好的研究課題?，F(xiàn)在已經(jīng)有些研究單位開始致力于插件的設(shè)計(jì)，來(lái)實(shí)現(xiàn)公式模板到MathML編碼的對(duì)應(yīng)。

3 在線公式編輯器的設(shè)計(jì)和實(shí)現(xiàn)

3.1 設(shè)計(jì)

通常我們?cè)O(shè)計(jì)一個(gè)交互界面，采用在線文本編輯器來(lái)進(jìn)行各類對(duì)象的輸入、修改等編輯工作。本文的設(shè)計(jì)思想是：在CKEditor的工具欄中插入一個(gè)新的按鈕作為公式編輯器的接口，當(dāng)單擊該按鈕時(shí)，打開公式編輯窗口，如圖1所示。當(dāng)用戶在公式編輯窗口中所見即所得輸入數(shù)學(xué)公式后，系統(tǒng)自動(dòng)生成MathML編碼，選擇“返回主窗體”按鈕，系統(tǒng)將此段MathML編碼返回并添加到Textarea中，然后利用MathPlayer來(lái)解析MathML編碼，并將公式顯示在文本框中。

圖1 在瀏覽器中輸入數(shù)學(xué)公式

3.2 實(shí)現(xiàn)

3.2.1 在CKEditor中設(shè)計(jì)MathEdit接口 根據(jù)設(shè)計(jì)思想，實(shí)現(xiàn)步驟如下：

第一步：下載開源文本編輯器CKEditor和MathEdit包

第二步：先解壓CKEditor到發(fā)布的站點(diǎn)下，然后將MathEdit解壓到ckeditorpluginsmathEdit下

第三步：在mathEdit目錄下新建一個(gè)plugin.js文件，并定義新組件。

(function(){

CKEDITOR.scriptLoader.load(“../plugins/mathEdit/mathedit/matheditAPI.js”);

ma= {exec:function(editor)

{mathedit.newMath(′d0′, ′cursor′);}},

mb=′mathEdit′;

CKEDITOR.plugins.add(mb,{

init:function(editor){

editor.addCommand(mb,ma); // 定義點(diǎn)擊該按鈕執(zhí)行的相應(yīng)事件

editor.ui.addButton(mb,{ // 增加按鈕

label:mb,

icon: this.path + ′image/math.png′, //添加16*16像素的math圖像按鈕

command:mb

});

}

})})();

第四步：注冊(cè)該組件

在ckeditorconfig.js中添加代碼行：config.extraPlugins=′mathEdit′;

第五步：源碼打包,使其產(chǎn)品化

執(zhí)行ckeditor下的ckpackage.exe命令：ckpackage.exe ckeditor.pack

3.2.2 數(shù)學(xué)論壇設(shè)計(jì) 無(wú)論是就論壇中的一個(gè)主題發(fā)起還是回復(fù)帖子，我們都可以借助在線文本編輯器來(lái)實(shí)現(xiàn)。

1)為了能正確運(yùn)行xhtml碼，需加以下行：

2)在論壇中加載編輯器：

在內(nèi)引入CKEditor核心文件ckeditor.js：

在使用編輯器的地方插入控件textarea：

4 結(jié)束語(yǔ)

本文通過(guò)在CKEditor文本編輯器中增加MathEdit接口，來(lái)調(diào)用MathEdit插件。從而解決了在瀏覽器中實(shí)現(xiàn)數(shù)學(xué)公式的輸入、表示、存儲(chǔ)、編輯問(wèn)題，使數(shù)學(xué)公式的交流變得輕松而簡(jiǎn)單，提高了我校的數(shù)學(xué)精品課程的訪問(wèn)率。

參考文獻(xiàn)：

[1]郭 威, 劉三蚜,楊宗凱,等.基于MathML的在線公式編輯器的實(shí)現(xiàn)與應(yīng)用[J].計(jì)算機(jī)應(yīng)用研究，2008,25(10):3177～3180.

[2]David C. MathML 介紹[EB/OL]. http://www.ibm.com/developerworks/cn/xml/x-mathml3/,2011-01-29.

[3]駱惠清. 基于MathML 的數(shù)學(xué)公式在網(wǎng)絡(luò)上的表示與傳輸[J]. 重慶科技學(xué)院學(xué)報(bào)( 自然科學(xué)版),2008(4):97～99.

[4]張 婷,李 廉,蘇 偉,等. 基于MathEdit的數(shù)學(xué)公式轉(zhuǎn)換器[J].計(jì)算機(jī)應(yīng)用與軟件.2010,27(1):14～16.

[5]趙燕娟,李 廉,蘇 偉，等. 基于MathML的網(wǎng)絡(luò)數(shù)學(xué)公式編輯器的實(shí)現(xiàn)[J].計(jì)算機(jī)工程,2008,34(07):76～78.

[6]歐陽(yáng)辰.數(shù)學(xué)公式與WEB[J].計(jì)算機(jī)工程與應(yīng)用,2001,17:89～92.