Html+Css+JavaScript实现网页公式编辑器(二)

上次把有的没的说了一大堆，也没有认真讲，这次我们把上次的那个分数和积分拿出来再详细讲一下。

上次展示的分数的代码如下：

1 <span math='frac' mathroot='true'>
2 　　<span></span>
3 　　<span>2</span>
4 　　<span>4</span>
5 </span>

我们发现它展现出来原本应该是这个样子：

然后我们把第一个span做成它的操作符，就是分数线，后面的分子分母移到对应的位置上，一个分数就完成了。

可能图为了美观，没有明确表现出移动的大小，这里叙述一下过程，分子2上移了自己高度的一半然后向左移动了操作符的宽度。分母4下移自己的高度的一半，向左移动分子2的宽度和操作符的宽度。操作符的宽度跟分子或分母中宽度大的一样。

 

经过这样的说明是不是大体清楚这些公式的实现呢，无非都是上下左右的移动，把它们放到对应的位置再进行反复调试，根据浏览器差异做一些修正。如果你打算开始做公式的话，我建议你一开始要找几个卡片，自己摆摆位置一会儿就明白了，我就经常在桌子上摆来摆去一会儿思路就出来了。

 

下面简单的说一下我的js库中的方法吧，本公式使用了轻量级的jquery库，使开发更高效。

 （....代码经理不让发出来了  - -）

 

不知道我稀里哗啦粘了这么多代码，各位看明白没，不明白问我吧...

好了，今天就先到这里，最近正在整合这个公式的编辑器，也不知道美工的页面做成什么了，我自己现在做了一个测试页面，觉得也不难看，先放上来让大家看看哈，高仿word的。

 

下次我们说说编辑的问题...

转载于:https://www.cnblogs.com/zhangcheng1990/articles/2567392.html