一种支持公式的在线文档编辑器的设计
开篇：润墨网以专业的文秘视角，为您筛选了一篇一种支持公式的在线文档编辑器的设计范文，如需获取更多写作素材，在线客服老师一对一协助。欢迎您的阅读与分享！
摘要：随着网络技术的发展，在线编辑文档的要求越来越普遍，而编辑内容也不再仅限于文本，内容形式越来越丰富。但是目前Web浏览器和编辑器对数学公式输入与显示的支持非常有限。该文将详细介绍一种改进的基于CKEditor的支持公式的文档编辑器的设计方案，该方案既解决了浏览器对公式的兼容性问题，又利用了开源的公式编辑器提供了公式数据的可重用性。
中图分类号：TP311 文献标识码：A文章编号：1009-3044（2016）13-0073-02
Abstract：With the development of Internet technology， online editing document requirements become more and more. Thetypes of edited content become more and more rich but not limited to text. But the current Web browsers and editors cannot support inputting and displaying for mathematical formula very well. An Implementation is presented to support formula editing in the online editor. It can also solve the WEB Browsers’ compatibility， but also help to reuse the formula data based on formula editor.
Key words：online editing；formula editor； CKEditor
1 背景
随着网络技术的发展，在线编辑文档的要求越来越普遍，而编辑内容也不再仅限于文本，内容形式越来越丰富。数学是科学技术的基本语言，对于教育和科研领域来说，解决基于网页的数学公式编辑问题显得更为重要。但是目前Web浏览器和编辑器对数学公式输入与显示的支持非常有限，并且各个浏览器的支持程度存在差别。
事实上，数学公式一直以来都是一个致力解决的重大问题，许多研究人员也给出了一些技术解决方案。综合来看，在浏览器中显示公式分为两类技术：一类是基于图片的显示；另一类是基于数学公式标记语言MathML[1]（Mathematical Markup Language）来标记数学公式。
第一类方式又分为普通静态图片显示和动态生成图片显示两种，前者是直接利用某些软件制作数学公式图片后，将图片置为网络资源。这种方法的优点是可以保证公式在浏览器中的正常显示，但最大的问题是在浏览器中公式数据无法重用，不能进行二次编辑。后者是服务器接受到公式数据信息后由浏览器解析并显示。但是各种浏览器的支持程度不同，在某些情况下公式显示结果不正常。在动态生成图片发送至网络终端，但其中的公式备注信息需要通过深入学习才能理解和使用，对于网络交互使用十分不便，其占用网络服务器和网络传输资源较大，不能适应大并发数的网络交互应用。
第二类方式是基于MathML的处理。MathML的目标就是使Web可以服务、接收、处理数学公式，正如HTML处理文本的功能那样。Mathml基于xml语言，具有xml语言具有的一切特征，可以实现数据与显示相分离。MathML元素可以包含于带命名空间的XHTML文档。MathML 2.0还包含MathML DOM（MathML文档对象模型），可以识别MathML组件并能用任何脚本语言操作它。虽然MathML功能十分强大，但是需要浏览器来解析MathML。而目前浏览器对MathML的支持程度残次不齐，支持程度不太乐观。因此单纯的利用MathML作为数学公式的显示尚有不足
从国际互联网协会（W3C）网站收录的情况来看，目前实现在主流的IE浏览器下显示和编辑数学公式的方案，无一例外地需要安装额外的软件或插件。为了帮助用户可以在线编辑文档，不但能支持常用的文本，表格，图片等数据的编辑，还能较好地支持数学公式的编写，本文提出一种用户可以编辑文本与数学公式的在线编辑器。此类编辑器用户可以在编辑文档的过程中随意的插入表格，图片数学公式等常用数据。用户编写的数据可以保存在服务器中。
2 系统方案
本文提出一种能够支持公式编辑的在线编辑器的实现方案。目前有一些开源的在线编辑器和公式编辑器，经过多方面的考虑，选用Ckeditor[2]和MathIML Editor[3]。
2.1 现有技术分析
1）Ckeditor
Ckeditor是一个开源的项目，是目前最优秀的可见即可得网页编辑器之一，采用JavaScript编写。并且有丰富的官方文档与API。该编辑器功能比较强大，提供了良好的可视化界面，支持常用的内容编辑。底层的数据格式是html。
CKeditor自身支持数学公式的格式化编辑，并且显示良好，操作方便并且操作过程中可与用户进行良好的互动。但是其采用js+css+html相结合的方式，在浏览器兼容性方面会有一些问题。且公式数据是CKeditor的私有格式，不便于数据共享和处理。
2）MathlML Editor
MathlML Editor也是一个开源项目。它一个基于Web的公式编辑器，该项目使用 MathML Formula for Flash 来编辑和显示公式。最重要的，它可以解析MathML类型的数据，并且可以将用户编辑的数学公式保存为图片、MathML等多种数据形式。该编辑器可嵌入在web页面中，因此，可以将其嵌入在Ckeditor中使用。
2.2 系统实现方法
在本方案中，CKeditor支持大多数内容形式的编辑，对于公式的编辑需要特殊处理。首先需要对CKeditor进行配置，去掉原有自带的公式编辑，在菜单项中加入MathlML Editor的调用。处理步骤如下：
1） 首先在CKEDITOR的plugins中添加一个按键对应“公式编辑“；
2） 增加该按键的监听，调用公式编辑器；
3） 调用MathlML Editor的接口实现数据的载入和保存，编辑功能不做改动；
4） 通过Java实现将公式数据存入服务器的功能；
5）保存公式时通过js代码与CKeditor进行交互。
在文档编辑时涉及到新插入公式和编辑已有公式两种情况，处理稍有差异。流程图如图2所示。
插入新公式的实现步骤如下：
1）在Ckeditor中插入图片时，先调用MathlML Editor进行公式的编辑，
2）保存公式时，利用MathlML Editor的接口将公式的数据同时保存为图片文件和MathML文件；
3）在Ckeditor中的中记录步骤2产生的图片和MathML文件路径。图片的资源路径赋值给的“href”属性，此时即可显示图片。
编辑已有公式的实现步骤如下：
4）在Ckeditor中双击图片对象时，将标记中MathML文件路径传给MathlML Editor，此时即可调用MathlML Editor进行公式再次编辑；
5）保存时与新建公式的保存原来一致。
本方案使用MathlML Editor弥补了ckeditor公式显示和编辑功能上的不足，使用少量的、逻辑清晰的js代码将两个编辑器结合，可以实现支持公式的在线编辑器。本方案采用了图片和MathML相结合的方式来解决在线编辑时的公式编辑问题。通过图片显示公式，可以保证公式内容在所有浏览器中都可以被正常显示；保留公式MathML数据则可以使公式能够进行再次编辑，而且通过的MathML数据也便于后期的数据交互和利用。
3 结束语
本方案在Ckeditor的基础之上，将其与MathlML Editor相结合，使公式编辑的功能更加强大。既解决了浏览器对公式显示的兼容性问题，又保证了公式信息的二次编辑，MathML数据也便于后期数据交互的需求。
参考文献：
[1] Mathematical Markup Language （MathML） Version 2.0[EB/OL].http：///TR/MathML2/.
[2] Ckeditor[EB/OL].http：///.
[2] Mathlml Editor[EB/OL].http：///p/mathlmleditor
[3] 王红等.Java Web应用开发技术使用教程[M].北京： 中国水利水电出版社， 2008.
[4] 莫里森.深入浅出JavaScript（中文版）[M]. 北京： 人民邮电出版社， 2012.
[5] 乌尔曼， 戴克斯.Ajax入门经典[M]. 北京： 清华大学出版社， 2011.