Html+Css+JavaScript实现⽹页公式编辑器（⼀）
最近⼀直在做⽹页版的公式编辑器，现在进度过半，我来总结⼀下这段时间开发⽹页公式编辑器的经验。
开始开发之前，我在⽹上搜集了⼤量⽹页公式⽅⾯的资料，现在⽐较流⾏的⽹页公式都是⽤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中表⽰它是⼀个数学公式和它是⼀个什么公式，浏览器便可以识别出它来。
下⾯是这两个⽅法在浏览器中的样⼦（⽐例有所放⼤）：
css和html和js怎么结合分别在IE8，Chrome19，Safari5.1.7测试…
今天稀⾥糊涂说了⼀⼤堆，各位看官可能发现最重点的JS实现没有说出来，说实话，鄙⼈的JS知识浅薄，需要整理⼀下思路，欲知后⽂如何，各位看官且听下回分解...
PS：⾃⼰看了⼀遍，发现这⼀篇废话连篇，就是⼀个设计思路，重点如何实现思路⼤体说出来了，但是
在具体⼀些还未涉及，后⾯如何写还有待深思熟虑啊...⼩⽣今年刚刚毕业参加⼯作，是⼀个90后的程序员，还需要前辈们多多拍砖啊...

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。