基于MathML的在线公式编辑器的实现与应用

收稿日期:2007-12-15;修回日期:2008-03-04 基金项目:国家“十一五”科技支撑计划重大资助项目(2006BAH 02A24);国家教育部/外国专家局高等学校学科创新引智计划资助项目(B 07042);IBM 大学合作项目(S UR2006)
作者简介:郭威(1983-),男,湖北孝感人,硕士研究生,主要研究方向为知识服务(w eiguo031@);刘三
(1973-),男,安徽桐城人,副
教授,博士后,主要研究方向为知识服务、人工智能;杨宗凯(1963-),男,河南郑州人,教授,博导,主要研究方向为网络教育标准与技术、现代通信网络、智能信号处理;孙建文(1983-),男,重庆人,博士研究生,主要研究方向为知识服务;刘林(1983-),男,四川合江人,硕士研究生,主要研究方向为知识服务.
基于MathM L 的在线公式编辑器的实现与应用
*
郭 威,刘三
,杨宗凯,孙建文,刘 林
(华中师范大学教育信息技术工程研究中心,武汉430079)
摘 要:在阐述了数学标记语言Ma thML 和公式插件WebEQ 的基础上,提出了一种基于MathML 的在线公式编辑器的设计,并以文本编辑器FCKeditor 为平台进行了实现,最后给出了具体应用与进一步的改进,较好地解决了上述问题。

关键词:数学标记语言;WebEQ;在线公式编辑器;实现;应用
中图分类号:TP 391 文献标志码: A 文章编号:1001-3695(2008)10-3177-04
Im plem enta tion an d applicat ion of M at hM L-based on-line form u la edit or
GU O Wei,LIU S an-ya,YAN G Zong-kai,S UN J ia n-wen,LIU Lin
(Engineering Research Center for Education Information Technology,Centr al China Nor mal Univers ity,Wuhan 430079,China)
Abst ract :In t he Web-environm ent s,how t o input ,edit,tra ns m it and display m at h form ula on-line ha s becom e one of the m ost difficult problem s to dev elop e-lea rning and net work exam ina tion on m a th a nd science s ubjects.After the ex pa tiat ion of M at hM L a nd WebEQ,t his pa per present ed a design of M at hM L-ba sed on-line form ula editor and realized it on t he pla tform of FC Kedit or.Finally,ga ve som e applica tions and im provem ent s,w hich resolv ed t he above difficult y efficient ly.Key wo rds:Ma thML;WebEQ;on-line form ula editor;im plem ent at ion;applicat ion
0 引言
随着Int ernet 的快速发展,越来越多的人通过Web 发布、获取和管理知识。

数理公式作为知识体系中的重要组成部分,在基于Web 的网络教学、信息发布、学术交流等方面起着非常重要的作用,特别是在一些远程教学和网络考试系统中,在师生互动讨论、教师输入试题、学生解答试题等关键环节,在线输入、编辑、传输和显示数理公式已成为一种十分迫切的要求[1]。

然而在目前的Web 环境下,由于数理公式自身的复杂性以及目前Web 中HTML 对各种数理符号特殊标记的支持非常有限,有关数理公式的输入、编辑、传输和显示问题一直困扰着广大师生。

目前,解决此类问题的方法主要有以下四种[2]:
a)图片法。

Web 发布者先通过Mat hTy pe 等客户端公式编辑器来编辑公式并将其转换为图片(J PG 或J IF 格式),然后嵌入到HTM L 网页中,最后公式以图片的形式在客户端的浏览器中显示。

这种方式的缺点有:若发布者要更改公式,必须重新绘制公式的图片;访问者不能获取公式的语义,也不能编辑公式。

b)专用的数学公式的浏览器插件。

有些公司为了配合本公司自己的教学软件或教学网站,设计了专用的插件。

访问者要观看数理公式,必须先要下载这些专用的浏览器插件。

这种方式的主要缺点有公式复用性差;软件独立性差。

c)使用La Tex 。

LaTex 是一套基于习惯性书写思维的数学
公式表示方法,一些大的软件公司开发出一些专用的LaTex 浏
览器插件,通过这种方式,浏览器可以直接观看嵌入在HT ML 中的公式符号。

这种方式的优点是LaTex 文档的操作简洁,复用性好;缺点是L aTex 不是一种标记语言,在网络应用和数据的格式化标准化方面的扩展能力较差。

d)基于Mat hM L 的应用。

Ma thML 是W3C 组织制定的一套基于XML 的数学公式处理的标准。

作为一种标记语言,Mat hM L 在设计之初就考虑到网络上的应用和集成,所以Mat hM L 在Web 上具有非常广泛的应用前景。

分析比较以上四种方法可以发现,尽管前三种方法在某些特定的情景下可以解决数理公式的显示问题,但其在公式的在线输入和编辑方面仍然存在较大的局限性,在标准化方面也没有形成统一的标准。

作为XML 的一种应用,Mat hML 继承了XML 的大部分优点,已成为Int ernet 上最重要的数学公式标准,具有广泛的应用前景。

本文提出的一种在线公式编辑器的设计与实现,正是以Mat hM L 为基础,较好地解决了在线输入、传输、显示数理公式的难题。

1 M athM L 与We bEQ
1.1 数学标记语言M at hML
Web 技术和XML 的快速发展推动了数学信息的表示、存储以及传输方式,提出了使用XML 来描述数学表达式的理念,
第25卷第10期2008年10月 计算机应用研究
Applicat ion Research of Com puters Vol.25No.10
Oct.2008
于是Ma thML 诞生了。

数学标记语言Ma thML (m at hem at ical m a rkup langua ge)[3]是由国际互联网标准组织W3C 提出的,是针对Web 上数学信息的使用而研制和发展起来的一套基于XML 的数学信息规范,是计算机之间交换数学信息的基本标准。

它完全采用XML 的定义规范,继承了XML 的大部分优点,具有强大的数学公式表达能力。

Mat hM L 提供两种描述数学公式的标记:a)呈现型标记(present at ion m arkup),用来描述数学表达式的二维布局结构,它更注重表达式的显示方式[4];b)内容型标记(cont ent m a rkup),用来描述数学公式的逻辑内容,它更关注表达式的内在含义。

Mat hM L 语言规格1.01版于1999年7月公布,2003年10月发布了Mat hM L 2.0。

Mat hML 2.0是一个XML 应用,它支持在Web 页面正确显示数学符号和在应用之间传递数学符号。

在2007年4月底,W 3C 就其数学标记语言Mat hML 发布了一个新的工作草案版本———3.0版。

Mat hML 3.0中最有趣的工作称之为面向内容的标志。

1.2 WebEQ
Mat hM L 通过标记元素的各种属性控制数学表达式的动态交互过程,但对于一般用户而言,直接使用Ma thML 并不方便,要简易地创建动态数学网页,可以使用一些插件。

Desig n S cience 下的WebEQ 就是一种不错的选择。

WebE Q 开发包提供了编辑动态数学应用程序和Mat hML 代码的J a va 工具和相关组件,主要由WebE Q edit or 、WebEQ publis her 、WebE Q library 以及四个J a va applets(input control 、v iewer cont rol 、graph control 、s ervice provide)组成[5]。

本文第2章有关在线公式编辑器的实现正是利用了Input Cont rol 和ViewerC ontrol 这两个J a va a pplet 分别完成了数理公式的在线输入和显示。

WebEQ Input Cont rol 是一个功能上等同于客户端公式编辑器的J ava a pplet,它被嵌入到Web 页面中显示,用户可以直接在线输入和编辑公式。

它的最大优点是所见即所得,即用户在呈现的公式面板上选择对应的公式模板,再经过简单编辑即可得到所需的公式。

这种方式简洁易用,与操作WebEQ edit or 、M at hType 等客户端公式编辑器一样方便。

运用WebEQ Input Cont rol,人们可以方便地在线输入数理公式,而要使这些公式在Web 页面上显示出来,还要用到WebEQ ViewerC ontrol 。

该applet 调用View erCont rol.cla ss 类来解析M at hML 代码,并将代码所对应的公式在页面上显示出来。

WebEQ 插件包括WebE Q InputC ontrol 和WebEQ Viewer-Cont rol,用于在浏览器中输入、显示数理公式,支持Ma thML 和WebTex 。

由于WebEQ 插件以J av a 语言和Mat hML 技术为基础,它与平台和浏览器无关。

可以预见,随着互联网的发展和M at hML 规范的完善,WebEQ 插件在Web 上显示和处理数学表达式的应用将会越来越广泛
[6]。

但在目前有关WebEQ 插
件的应用也并非完美,问题之一便是各种插件的应用之间缺少整合,集成度不高。

单独使用WebEQ Input Cont rol 可以完成公式的输入,但公式无法在网络上进一步传输和显示;单独使用WebEQ ViewerC ontrol 可以完成公式的显示,但要求使用者具备一定的Mat hML 的知识,并且当要显示新公式时必须重新更
改M at hML 代码,灵活性差。

为了克服孤立地使用这些插件带来的局限性,本文提出的在线公式编辑器将WebE Q 的两种应用整合到同一平台上,使公式的输入、传输、显示流线型地完成,并成功应用到实际系统中,提高了应用的灵活性和扩展性。

2 在线公式编辑器的设计与实现
2.1 设计
利用WebEQ 插件下的Input Cont rol 和ViewerCont rol 这两个类可以分别实现数理公式的输入和显示功能,但要实现真正的在线公式编辑,必须将这两者结合起来。

要实现这样的一个在线公式编辑器,本文主要的设计思路是:a)开发一个公式编辑的页面,该页面要能够完成所见即所得地输入公式,自动获取输入公式的Ma thML 代码以及解析Ma thML 代码将公式显示出来等功能;b)将该页面作为一个接口嵌入到一般的文本编辑器中,以进一步扩展公式的编辑和传输功能[7,8]。

笔者选取目前应用十分广泛的开源在线文本编辑器FCKedit or 作为开发平台。

首先,在FCKedit or 上增加一个新的工具栏作为公式编辑的接口,当用户需要输入公式时,点击该工具栏,系统将调用J av aS cript 启动公式编辑的页面,弹出一个公式编辑窗口;当用户在公式面板中所见即所得地输入公式后,点击窗口下端的确定按钮,页面能自动获取到输入公式所对应的Mat hM L 代码;利用WebE Q 插件的ViewerCont rol 类来解析代码;最后将公式在FCKeditor 的编辑框中显示出来,再作进一步的编辑和传输。

整个的工作流程如图1所示。

2.2 实现
本节将给出具体的实现过程:首先需要下载两个软件,即开源文本编辑器FCKedit or(笔者使用的版本为2.4.3)和WebEQ 插件WebEQApplet.jar 。

FC Kedit or 是一款功能强大的在线文本编辑器,而且它是轻量级的,无须任何形式的安装,移植性强。

WebEQApplet .jar 包中有两个需要用到的cla ss 类:In-put Cont rol 和View erCont rol,分别用来输入和显示数理公式。

下载并解压FCKedit or_2.4.3.zip 得到fckedit or,保留edit or 文件夹及fckconfig.js 、fckeditor.js 、fckst yles.xm l 、fcktem plat es.x m l 四个文件,其余的文件和文件夹均可删除。

在fekeditor 文件夹下,修改fckconfig.js 、zh-cn.js 、fckedit orcode_gecko.js 和fckedi-torcode_ie.js 四个文件,为FC Kedit or 增加一个新的工具栏———插入公式。

若要为该工具栏附上图标,可用图像处理软件对图片文件fck_strip.gif 作适当的编辑和修改。

这样,就为FCKedi-tor 调用公式编辑页面提供了一个接口。

图2为FCKeditor 所有工具栏的截图。

其中包括新增的工具栏插入公式。

接下来需要实现这个接口。

在文件夹dialog 下新建文件夹fck_form ula,在fck_form ula 下新建form ula.htm l 页面,同时
·
8713·计算机应用研究 第25
卷
将WebE QApplet.jar 放到fck_form ula 下。

这里,…\dia log \fck_form ula\form ula.htm l 即为新增工具栏调用公式编辑页面的路径,也即form ula.htm l 页面是控制在线输入和显示公式的枢纽。

以下是form ula.ht m l 页面的一些关键代码及其说明:
〈applet ar chiv e =″WebEQApplet.ja r ″code =″Webeq3.editor.Input-Contr ol ″codebase ="."w idth =″690″heig ht =″200″name =″myApplet ″″〉
〈par am na me =″useslibra ry ″va lue =″WebEQApplet ″〉
〈par am na me =″useslibra rycodeba se ″value =″WebEQApplet.cab ″〉〈par am na me =″useslibra ryver sion ″va lue =″3,7,0,0″〉〈/applet 〉
这是一个J a va applet,该a pplet 调用WebEQApplet.ja r 包中的InputControl 类,展现出一个所见即所得的公式编辑环境,供用户输入公式。

这里需要注意的是,codebas e 指示的是WebEQApplet.ja r 包与公式编辑页面的相对位置,本例中两者在同一文件夹下。

图3显示的是在线输入数理公式的截图。

〈form 〉
〈input type =″button ″value =“确定”onclick =″check()″/〉〈/for m 〉
这行代码是在applet 的下面增加了一个确定按钮,当公式输入完毕,点击确定执行check()中的代码,完成公式的显示。

以下是显示公式的一段脚本,包括check()函数的实现:
〈script ty pe =″text/javascr ipt ″〉
var oE ditor =window.parent.Inner Dialog Loaded(); /*取得父窗口对象———FCKeditor 文本编辑器*/ function check() {
va r mml_txt =document.myApplet.getPackedM athM L();
/*获取公式对应的MathML 代码*/
var head =″〈applet a rchiv e =\″WebEQApplet.jar \″codebase =\″/TestFCKeditor /FCKeditor/editor/dialog/fck_for mula \″code =\″Webeq3.ViewerControl.class \″width =\″200\″height =\″60\″align =\″middle \″〉
〈para m name =\″useslibrar y \″value =\″WebEQApplet\″〉 〈par am nam e =\″useslibrar ycodebase \″value =\″WebEQApplet.cab \″〉
〈para m name =\″useslibrar yver sion \″value =\″3,7,0,0\″〉 〈para m name =\″eq \″v alue =\″″;/var tail =″\″〉 〈para m name =\″for eground \″v alue =\″black\″〉 〈para m name =\″background \″value =\″white\″〉 〈para m name =\″selection \″value =\″tr ue \″〉 〈para m name =\″parser\″value =\″mathml \″〉 〈para m name =\″size \″value =\″12\″〉〈/a pplet 〉″; va r dis_mml =head +mml_txt +tail; /*包含MathML 代码的完整的applet*/
oE ditor.FC K.insertHtml(dis_mml ||″″);
/*在FCKeditor 编辑器中运行applet,显示公式*/ window.par ent.cancel();/*关闭公式编辑窗口*/
}
〈/scr ipt 〉
这段脚本语言的主体是函数check(),它获取公式对应的M at hML 代码,将M at hML 嵌入到applet 中,在FCKeditor 编辑框中运行applet 显示公式。

注意这里的applet 中调用的类为WebEQApplet.ja r 包中的View erCont rol.cla ss 。

还有一点要特别注意:此时codebas e 指示的是WebEQApplet.jar 包与公式显示页面的相对路径,而不是与公式输入页面的相对路径。

在实际的整合应用中,由于公式的显示页面不确定,这里的codebase 最好为WebEQApplet.ja r 包与服务器根目录之间的绝对路径。

这样,不管公式的显示页面跳转到何处,通过该codebase 总能够找到WebEQApplet.jar 包来解析Ma thMl 代码,以正确地显示公式。

图4是公式编辑页面中输入的公式在FC Kedit or 中的
显示。

在编辑框中,还能对公式的位置、大小等再次进行编辑,之后再在网络上进行传输。

3 在线公式编辑器的应用与改进
在远程教学和网络考试系统中,师生互动讨论、教师编辑试题、学生解答试题等已经成为必不可少的关键环节。

然而,目前的系统大都采用一般的文本编辑器来供用户进行文本编辑,这些编辑器可以完成对字符、图片、动画等内容的输入和编辑工作,但对数理公式的支持却非常有限,严重制约了数理学科开展网络教学和网络考试。

笔者以FCKeditor 为平台对在线公式编辑器作了一般的实现。

在此,将在线公式编辑器应用到网络教学和考试系统中,较好地解决了在线输入、编辑、传输和显示数理公式的难题。

这里以开源教育软件LAMS(学习活动管理系统)为例进行讲解。

LAM S 是一个以活动为中心的学习管理系统,教师用户可以设计学习序列来供学生用户进行学习。

教师在设计学习序列、学生在回答教师提出的问题以及在线讨论等活动中都需要在线地编辑文本。

在原系统中,教师用户和学生用户分别使用FCKedit or 和Textarea 编辑器来编辑文本。

这两种编辑器可以对一般的文本进行编辑,但不支持数理公式的输入和编辑,笔者将在线公式编辑器应用到LAMS 中成功地解决了这个问题。

对教师用户而言,由于原系统提供的编辑器是FCKedit or,本文设计的在线公式编辑器也是以FC Keditor 为平台;此外,FCKedit or 具有免安装、移植性强的特点,因此,直接用在线公式编辑器替换原系统安装目录下的FCKedit or 即可。

新的在线公式编辑器除了具有FC Kedit or 原有的所有功能外,还新增了公式输入和编辑功能。

教师用户可以利用在线公式编辑器设计包括数理公式在内的学习序列,然后保存在数据库中,供学生用户在客户端学习。

对学生用户而言,原系统提供的编辑器是Text area ,只能进行最基本的文本编辑。

为了扩展编辑器的功能,先找到相应的J SP 页面,然后用在线公式编辑器替换原来的Tex ta rea 编辑框。

调用在线公式编辑器的代码如下:
〈script type ="text/javascr ipt"src ="http://172.16.129.158:8090/la ms /fckeditor /fckeditor.js"〉〈/script 〉
〈script type ="text/javascr ipt"〉
v ar oFCKeditor =new FCKeditor(′entr yText ′); /*entryTex t 为原来Tex tarea 的标志符*/
oFCKeditor .basePath ="http://172.16.129.158:8090/lams //
fckeditor /";//FC Keditor 的路径
oFC Keditor.height =200;/*编辑框的高度*/ oFC Keditor.toolbarS et ="Default";
/*工具栏的设置:Default 或Ba sic*/
oFC Keditor.va lue =′content ′;/*编辑框的默认值*/ oFC Keditor.config["AutoDetectLanguag e"]=false; oFC Keditor.config["DefaultLangua ge"]="zh";
·9
713·第10期郭 威,等:基于Mat hML 的在线公式编辑器的实现与应用
oFC Keditor.cr eate();〈/scr ipt 〉
这样,学生用户在学习序列时就可以非常方便地输入包括数理公式在内的内容,完成与教师的交互。

例如,图5显示的是学生在线回答教师的提问;图6显示的是学生(或教师)在论坛上发表观点;图7显示出了论坛上发表的各种观点,这些过程对数理公式都有很好的支持。

由此可以看出,运用本文提出的在线公式编辑器,不仅可以在线地输入和编辑数理公式,而且可以实现公式的在线传输和显示。

此外,还可以对在线公式编辑器作进一步的改进,以满足不同情景下的应用需求。

例如,要调整编辑器工具栏的外观,可以对文件fckconfig.js 进行修改,这里设置FCKConfig .t ool-ba rSets["Ba sic"]=[[′Font Size ′,′B old ′,′Ex pression ′]];然后在调用在线公式编辑器时设置oFCKedit or.toolba rSet ="B asic ";则在线公式编辑器只包含三个工具栏,即字体大小、加粗和插入公式。

其外观如图8所示。

同理,要使用其他的工具栏,只需将其对应的标签添加到t oolba rS ets 中即可。

另外,在网络考试系统中,还可以根据页面布局来调整编辑器的高度和宽度,以满足填空题和解答题等不同题型解题的需要。

4 结束语
随着网络教育的迅猛发展,在线输入、编辑、传输和显示数理公式已成为一种十分迫切的需求。

本文首先介绍了支持国
际标准的数学标记语言M at hML 以及全面支持Mat hM L 来输入和显示数理公式的WebEQ;在此基础上提出了一种基于Mat hM L 的在线公式编辑器的解决方案,最后给出了具体实现与应用。

与一般采用的客户端公式编辑器的解决方案相比,本文提出的解决方案除了具有客户端公式编辑器操作简便的特点以外,其最大的优势在于能够实现在线操作,完全支持Web 应用,这是一般的客户端公式编辑器所无法企及的;与一般离散地运用WebEQ 来分别完成公式的输入、显示等解决方案相比,本文的解决方案将多种应用整合起来集成在一个模块中,使公式的输入、传输、显示流线型地完成,而且这种整合是无缝的,完全屏蔽了其内部实现细节,使用者无须任何M at hML 知识即可方便地使用这种基于Ma thML 的在线公式编辑器。

目前,该在线公式编辑器作为一个组件集成于LAM S 和网络考试系统中,成功地解决了系统中在线输入、传输、显示数理公式的难题,借助于FCKedit or 平台,对公式的编辑也有一定的支持。

此外,该公式编辑器操作简单、使用灵活、运行稳定,具有良好的移植性和扩展性,支持各种通用浏览器,能够实现跨
平台工作,取得了较好的应用价值。

参考文献:
[1]
MITH G G,GRACKIN J,ERGUS ON D.M ath and distance lear-ning thr eaded discussions[EB/OL].(2002)[2007-12-05].http://www.link-sy /ex t _PNqUdT9CiqIAADkeBh4/GlennSmith-EDMedia 42902.pdf.[2]
欧阳辰.数学公式与Web[J].计算机工程与应用,2001,37(17):89-92.[3]
M athema tical markup language(Ma thML)v ersion 2.0[EB/OL].2nd ed.(200-10-02)[2007-12-05].http://www.w 3.or g /TR /2003/REC-Ma thML 2-20031021/.[4]
WATT S M ,LI Xue-hong.E xamples of MathML[E B /OL].(1999)[2007-12-05].http://w ww.csd.uwo.ca /～wa tt/pub /reprints /1999-sigsam-mathml.pdf.
[5]ITOH K.Designing a lear ner-friendly formula-editor for computer-assisted lear ning[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]张滨.实现Web 下公式符号在线操作的可视化编辑器系统的设计[J].计算机科学,2007,34(6):286-288.
[8]刘琼华.采用标记语言构造数学公式编辑器的方法[J].计算机工程,2003,29(18):82-83,121.
(上接第3176页)
[10]彭补拙,魏金悌,张燕.城市边缘区耕地预警系统的研究———以温
州市为例[J].经济地理,2001,21(6):714-718.
[11]葛向东,彭补拙,濮励杰,等.耕地总量动态平衡的监测和预警
研究[J ].自然资源学报,2002,17(1):35-41.
[12]葛向东,张侠,濮励杰.江苏锡山市耕地预警系统研究[J].南京
大学学报:自然科学版,2002,38(4):532-538.
[13]DeSOYZA A G,WHITFORD W G,HERRICK J E,et al.Ear ly
war ning indicators of desertification:examples of tests in the Chihua-huan deser t[J ].Journal of Arid Environments ,1998,39(2):101-112.
[14]KUMAR V.An early war ning system for agr icultural dr ought in a n arid
region using limited data[J].Journ al of A rid E nvironm ents ,1998,40(2):199-209.
[15]J ONGSCH AAP R E E.Run-time ca libration of simulation models by
integrating remote sensing estimates of leaf a rea index and ca nopy ni-tr ogen[J].Eu rope an Journ al of Agronomy ,2006,24(4):316-324.
[16]HERRICK J E.S oil quality:an indicator of sustainable land manag e-ment[J].A pplied Soil Ecolog y ,2000,15(1):75-83.[17]张光宏.耕地预警初探[J ].山区开发,2001(9):27-30.
[18]张鸿辉,刘友兆,缪瑞林.基于WebGIS 技术的耕地预警信息系统
的初步设计[J ].国土资源信息化,2003(5):22-25.
[19]李满春,白清,陈剐,等.耕地保护预警信息系统初步设计[J].
国土资源遥感,2002(3):65-68.
[20]邬伦,刘瑜,张晶,等.地理信息系统———原理、方法和应用[M].
北京:科学出版社,2001.
·
0813·计算机应用研究 第25
卷。