基于MathML的数学公式编辑器在浏览器上的实现

程文静(1.湖北工业大学,湖北 武汉 430068;2.湖北师范学院 学报编辑部,湖北 黄石 435002)

0 引言

随着Internet的普及，人类已逐渐习惯通过互联网来实现知识的获取、管理和交流学习。在数学教育与各种交流中，通常需要编辑大量的数学符号和公式，但目前Web技术对数学公式的支持有限，并不能象常规字符那样容易在Web中表示。因此，如何在互联网上实现数学信息的交流和远程数学教育成为一个需要研究的课题。

1 数学公式在web环境中的几种实现方式

为了在互联网上实现数学公式的输入、表示和显示，通常会采用以下几种方法来解决。

1．1 图片法

将各种公式编辑器生成的目标公式转换成图片文件，然后嵌入到HTML网页中，公式以图片的形式在客户端显示。这种方式的缺点是：更改公式需重新生成图片，访问者不能获取公式的语义，也不能编辑公式且转换过程单调而耗时。

1．2 专用的数学公式浏览器插件

有些公司为了配合本公司自己的教学软件或教学网站，设计了专用的插件。访问者要观看数理公式，必须先要下载这些专用的浏览器插件。这种方式的主要缺点是公式复用性差，软件独立性差[1]。

1．3 使用LaTex

LaTex是一套基于习惯性书写思维的数学公式表示方法，一些大的软件公司开发出一些专用的LaTex浏览器插件，浏览器可以显示嵌人在HTML中的公式符号。这种方式的优点是LaTex文档的操作简洁，复用性好,缺点是LaTex不是一种标记语言，在网络应用和数据的格式化和标准化方面的扩展能力较差。

1．4 基于MathML的应用

MathML是一种描述数学符号的低层语言规范，以将数学符号包含到网页中为目的，来实现计算机之间的交流提供一种底层的基础，又称为数学置标语言。基于MathML的应用,就是在xml页面中嵌入MathML语句,来实现数理公式在网络上的表示。

目前的研究方法大致有下列几种：

1)利用WebEQ插件来实现数学公式编辑[1]。方法是：利用WebEQ的InputContol类在图形界面中输入公式，然后由内部模块自动生成MathML代码，再通过ViewerContol类显示MathML代码在客户端。该方法使用简单，但WebEQ是一款需购买的插件。

2)利用MathType或WebEQ Editor两种客户端公式编辑器输入公式，然后利用“Export to MathPage”功能转换成Web页，来实现数学公式在互联网上的传输。此方法缺点是灵活性差。

3)利用Design Science 提供的免费组件MathPlayer，在IE上呈现含有 MathML语句的XHTML文档。MathPlayer用于在网页上显示数学公式,客户机需安装此插件。

4)利用Eitan Gurari 的 tex4ht 和 Bruce Miller 的 LateXML这些工具，将数学内容转换成 Content MathML 和 Presentation MathML，然后嵌入到htm页中，缺点是对于普通有户而言，不知道该嵌入到程序的哪个位置。

上述方法，虽然都能实现数理公式在网页上的表示，但实现起来有一定的局限性。为了体现程序的可移植性和复用性，在软件设计上通常采用插件的形式，在程序中采用嵌入的方法。本文通过在文本编辑器和在线数学公式编辑插件中建立联系，以解决数学公式在网页上的应用。此方法操作简单，可用于数学论坛、留言版等环境，并能真正实现远程动态建立含数学公式的新页面。

2 MathML与MathEdit

2.1 数学置标语言MathML[2]

MathML(Mathematical Markup Language)遵循W3C即万维网联盟推荐标准，是一个标记数学表达式的XML(可扩展标记语言)词汇表，它包含两个子语言：Presentation-MathML和Content-MathML。Presentation-MathML主要负责描述数学表达式的布局，Content-MathML负责标记表达式的某些含义或数学结构。在Web平台上的应用大都用Content- MathML。由于MathML在浏览器中的使用，从最初的设计阶段开始，MathML 的主要目标就是支持数学表达式作为文本而不是图像或插件使用在 Web 页面中，以允许搜索、调整文本大小等。MathML可用在浏览器、出版业、办公软件中，甚至可以到TeX、OpenMath、OOMML之间的转换。

2.2 数学公式编辑器MathEdit

尽管MathML可以将数学公式用标记语言来表示，以实现公式的输入、存储与输出，但如果用MathML语言来书写数学公式，其编写代码的工作量大且代码复杂，往往一个简单的公式需要十几行代码，对于没有语言基础的用户来说，比较费劲。就是有语言基础，书写纯MathML编码，也是一件费心的事情。如何能在网络上所见即所得地输入公式，成为一个很好的研究课题。现在已经有些研究单位开始致力于插件的设计，来实现公式模板到MathML编码的对应。

3 在线公式编辑器的设计和实现

3.1 设计

通常我们设计一个交互界面，采用在线文本编辑器来进行各类对象的输入、修改等编辑工作。本文的设计思想是：在CKEditor的工具栏中插入一个新的按钮作为公式编辑器的接口，当单击该按钮时，打开公式编辑窗口，如图1所示。当用户在公式编辑窗口中所见即所得输入数学公式后，系统自动生成MathML编码，选择“返回主窗体”按钮，系统将此段MathML编码返回并添加到Textarea中，然后利用MathPlayer来解析MathML编码，并将公式显示在文本框中。

图1 在浏览器中输入数学公式

3.2 实现

3.2.1 在CKEditor中设计MathEdit接口 根据设计思想，实现步骤如下：

第一步：下载开源文本编辑器CKEditor和MathEdit包

第二步：先解压CKEditor到发布的站点下，然后将MathEdit解压到ckeditorpluginsmathEdit下

第三步：在mathEdit目录下新建一个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); // 定义点击该按钮执行的相应事件

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

label:mb,

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

command:mb

});

}

})})();

第四步：注册该组件

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

第五步：源码打包,使其产品化

执行ckeditor下的ckpackage.exe命令：ckpackage.exe ckeditor.pack

3.2.2 数学论坛设计 无论是就论坛中的一个主题发起还是回复帖子，我们都可以借助在线文本编辑器来实现。

1)为了能正确运行xhtml码，需加以下行：

2)在论坛中加载编辑器：

在内引入CKEditor核心文件ckeditor.js：

在使用编辑器的地方插入控件textarea：

4 结束语

本文通过在CKEditor文本编辑器中增加MathEdit接口，来调用MathEdit插件。从而解决了在浏览器中实现数学公式的输入、表示、存储、编辑问题，使数学公式的交流变得轻松而简单，提高了我校的数学精品课程的访问率。

参考文献：

[1]郭 威, 刘三蚜,杨宗凯,等.基于MathML的在线公式编辑器的实现与应用[J].计算机应用研究，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 的数学公式在网络上的表示与传输[J]. 重庆科技学院学报( 自然科学版),2008(4):97～99.

[4]张 婷,李 廉,苏 伟,等. 基于MathEdit的数学公式转换器[J].计算机应用与软件.2010,27(1):14～16.

[5]赵燕娟,李 廉,苏 伟，等. 基于MathML的网络数学公式编辑器的实现[J].计算机工程,2008,34(07):76～78.

[6]欧阳辰.数学公式与WEB[J].计算机工程与应用,2001,17:89～92.