|
最近一直在做网页版的公式编辑器，现在进度过半，我来总结一下这段时间开发网页公式编辑器的经验。
开始开发之前，我在网上搜集了大量网页公式方面的资料，现在比较流行的网页公式都是用MathML：数学置标语言（Mathematical Markup Language，MathML），是一种基于XML的标准，用来在互联网上书写数学符号和公式的置标语言。JsMath：是一种在网页中显示数学公式的方法，通过解析 TeX 代码，结合 JavaScript 和 CSS 以及 unicode 字体 来显示数学公式，支持多浏览器和平台，无需 MathML 支持。诸如此类的技术还有，在此就不一一列举。
经过分析这些公式方法，发现他们各有优缺点，譬如有的方法最后公式生成为一张图片，虽然图片不大可以忽略网络传输的压力，但是一张数学试卷上面得有多少这样的小图片，而且修改也不方便。虽然有的方法可以加载一个第三方的CSS来达到网页显示编辑的目的，但是跨浏览器的表现也不尽如人意。有的还需要安装插件才能正常显示。
Html+Css+ JavaScript实现非图片的、在线网页编辑器理念应运而生。这样实现的网页编辑器屏蔽的图片实现的缺点，方便修改。于是，便开始分析《运筹学》此书中用到的公式以及特点。
以下摘取同事在开发公式编辑器的时候的总结：“公式输入或者书写，都是由左向右由下向上的。整体结构在阅读时也是遵循这样的规律的。.但是对于特殊的字符还要区分手写和大写，在公式前面可能会有属性限定例如:Max Min …虽然不涉及运算但是不能缺少的一个前缀。不同运算符各个项的比例不一样。括号输入的同时也需要独立一个项可以在括号外附加上下标。.为了不影响输入希望有插入设定能不在对整体改动的情况下对细节进行修改，方便输入答案的时候不因为修改细节而影响过多时间。”
吸取这位仁兄的总结，以及项目经理的建议，我把数学公式中分数、几次方、根号、积分等方法归为一个。
如图这九个方块就可以满足大部分的公式要求。我们把1号位置，叫做操作符，公式方法根据1号位置的符号来进行位置移动。例如：分数，1号位置为分数线，2号位置为分子，4号位置为分母。这样分数的大致形态就出来了，然后在进行位置的微调便可达到。积分：1号位置为积分符号，3、6、7分别为数值，这样实现了积分。
在html中，我们选用了span来表示方块。我们参考了MathML中的语法： 如：MathML中显示一个
 1 <math> 2 <mrow> 3 <mi>x</mi> 4 <mo>=</mo> 5 <mfrac> 6 <mrow> 7 <mrow> 8 <mo>-</mo> 9 <mi>b</mi> 10 </mrow> 11 <mo>±</mo> 12 <msqrt> 13 <mrow> 14 <msup> 15 <mi>b</mi> 16 <mn>2</mn> 17 </msup> 18 <mo>-</mo> 19 <mrow> 20 <mn>4</mn> 21 <mo>⁢</mo> 22 <mi>a</mi> 23 <mo>⁢</mo> 24 <mi>c</mi> 25 </mrow> 26 </mrow> 27 </msqrt> 28 </mrow> 29 <mrow> 30 <mn>2</mn> 31 <mo>⁢</mo> 32 <mi>a</mi> 33 </mrow> 34 </mfrac> 35 </mrow> 36 </math> 我们实现刚才那个分数和积分的代码如下： 1 分数： 2 <span math='frac' mathroot='true'> 3 <span></span> 4 <span>2</span> 5 <span>4</span> 6 </span> 7 8 积分： 9 <span math='integral3' mathroot="true"> 10 <span></span> 11 <span>3</span> 12 <span>6</span> 13 <span>7</span> 14 </span> 由此可以发现，我们的html代码十分简洁，只有开头span中表示它是一个数学公式和它是一个什么公式，浏览器便可以识别出它来。 下面是这两个方法在浏览器中的样子（比例有所放大）：
分别在IE8，Chrome19，Safari5.1.7测试…
今天稀里糊涂说了一大堆，各位看官可能发现最重点的JS实现没有说出来，说实话，鄙人的JS知识浅薄，需要整理一下思路，欲知后文如何，各位看官且听下回分解...
PS：自己看了一遍，发现这一篇废话连篇，就是一个设计思路，重点如何实现思路大体说出来了，但是在具体一些还未涉及，后面如何写还有待深思熟虑啊...小生今年刚刚毕业参加工作，是一个90后的程序员，还需要前辈们多多拍砖啊... |
|
|
的代码如下：
