HTML在线编辑器相信大家见得多了，有些流行的在线编辑器具有很丰富的功能。但美中不足的是，现有的HTML在线编辑器设置字号大小通常只限于1-7号字而已，不能更好地满足人们的需要。能不能实现像Word那样任意地设置字号大小呢？经过长时间的攻关，Bound0终于可以肯定地回答这个问题了，呵呵呵！请大家共同分享此“Eureka之喜悦”吧！
我们通常所见的内嵌在网页中的HTML在线编辑器，其核心本质是一个IFRAME
例如：<IFRAME id="Editor" Name="Editor" style="WIDTH: 550; HEIGHT: 480"></IFRAME>
令 Editor.document.designMode="ON";
此时这个IFRAME就是一个设计模式的HTML编辑器了，可以通过脚本
Editor.document.selection.createRange().execCommand(
command)
对选中的内容执行command，进行编辑操作。
由于浏览器本身提供的编辑功能非常有限，因此现在流行的HTML在线编辑器大都进行了一些扩展。（在本版精华中收集的PiscesTextEditor就是此类技术的集大成者之一。）
在本文发表之前，HTML在线编辑器在设计模式下的字号（字体大小）
任意设定功能尚无成功实现，本文所述技术不仅在此方面实现了零的突破，还对HTML在线编辑器的其他扩展功能的实现作出了广泛的启示。
[前人的误区]
现在流行的HTML在线编辑器的功能可以说已经很丰富了，为什么唯独
任意设置字体大小这个看起来并不华丽的功能没有被做出来呢？让我们先来了解一下其中的原因好了：
假设编辑区的HTML内容（Editor.document.body.innerHTML）是
<H1>逍遥主义者的宣言</H1>
<H3>十个小老头
<BR>朱氵太子
</H3>
<P>我们不是败家浪子，我们从不游手好闲；我们不是无用书生，我们从不怨天忧地；我们不是嬉皮士，我们从不玩世不恭；我们不是妄想家，我们从不脱离实际；我们不是阿Q，我们从不麻木颓废；我们不是狂人，我们从不争风吃醋。我们是创造者，我们是改变者，我们是革命
者。我们不是在不幸中去幻想幸福的人，我们甚至不是去追求、寻找幸福的人，我们是自己制造幸福的人，我们是快乐的发源者。首先，在我们经历必当经历的经历时，我们不允许自己不快乐！这就是，逍遥主义的真谛。</P>
<P><BIG>将你的梦打开，填进我的希望。谁都不必介怀，一点点的分量。面对别人述说，命运烛转轮回，世间天空海阔，种种因缘寂晦……</BIG></P>
假设选中的是红色的部分，则
Editor.document.selection.createRange().htmlText的内容是
<P>者。我们不是在不幸中去幻想幸福的人，我们甚至不是去追求、寻找幸福的人，我们是自己制造幸福的人，我们是快乐的发源者。首先，在我们经历必当经历的经历时，我们不允许自己不快乐！这就是，逍遥主义的真谛。</P>
<P><BIG>将你的梦打开，填进我
</BIG></P>
看见多出来几个蓝色的标签了吧？产生这种现象是因为：“任何时候，document.selection.createRange().htmlText取出来的html代码都是完整成对的，即使当前选中的内容横跨了几个不同的标签”（卖坏梨语），所以IE会自作主张地把不完整的标签补齐。
就是因为这个原因，当选中的内容在Editor.document.body.innerHTML中对应的代码包含不完整的标签时，在Editor.document.selection.createRange()上做pasteHTML可能会吃不进去（有不完整的<table>等时），或者出现明显的BUG。
而现在的HTML在线编辑器所提供的除了基本的Editor.document.selection.createRange().execCommand(
command)之外的各种功能几乎都是通过在Editor.document.selection.createRange()上做pasteHTML来实现的。
所以字号的自由设定才始终没能实现。
[解决之道]
一切关于“问题的解决之道”的方法论都不外乎是“变通”二字的某种讲法。既然这个功能不适宜用Editor.document.selection.createRange()的pasteHTML()方法来实现，我们就不用它好了。一个变通的想法是：通过改变
Editor.document.body.innerHTML的全局来实现。
很显然，至少在理论上，整体改变Editor.document.body.innerHTML
可以实现任何我们想要的HTML编辑效果。
多好，随着灵光一闪，战略上的大问题在一秒钟之内就被我们搞定了！接下来让我们看看具体的实现方法吧：
要想通过改变Editor.document.body.innerHTML来给选中的内容设置字号大小，首先要解决的一个问题是
在Editor.document.body.innerHTML中对选中内容所对应的代码进行定位。这算不上是个超级复杂的问题，但我知道对这个问题的解答也是很多人梦寐以求的。或许能有很多种解，下面给出我Bound0的办法。
显然这个问题不可以像一些人想象的那样随随便便地用正则或者查找之类的方法就搞定，设想我在
Bound00000000000000000000000000
00000000000000000000000000中随便选中了一个0（表示为红色）
，用正则随便查到了一个0，很难确保就是我选中的那个，同样的道理，如果是在雷同的若干段HTML代码中选中了一段，用查找所选字符的方法是不能确保正确定位的。
这个问题的合理的解应该能把Editor.document.body.innerHTML分成三段：partA—选中内容之前的内容所对应的代码、partB—选中内容所对应的代码（就是前面例子中红色的部分）、partC—选中内容之后的内容所对应的代码。（在全选的时候，partA和partC都是空字符串；选中内容为空的时候，从开头到光标位置的内容所对应的代码是partA，partB为空字符串，光标之后的内容所对应的代码是partC）
看看主要的代码：
复制内容到剪贴板
代码:
function first()
{
//首先要取得编辑区的内容
var oSel = Editor.document.selection.createRange();
var conts=''+oSel.htmlText //内容选中部分对应的代码，首尾可能带有多余标签（就是前面例子中的蓝色标签）。
var textLength = Editor.document.body.innerText.length
oSel.moveStart("character", -1*textLength) //把选择区的开始位置往前闪，再取一次内容
var contp=''+oSel.htmlText //选中部分及选中部分前的内容，末尾可能带有多余标签。
var conta=''+Editor.document.body.innerHTML //整个内容
var contpa=''
var partC=""
var partB=""
var partA=""
//接下来通过两组循坏，用上面取得的三个内容互相“磨”，把多余的标签“磨”掉。
var m=0
m=conta.indexOf(contp.substr(0,3)) //校正对齐contp和conta的开始位置，有时候conta开始处可能会有多余的<p>，造成两者对不齐
for(var f=contp.length;f>0;f--)
{if(conta.substr(m,f)==contp.substr(0, f)){contpa=contp.substr(0,f);partC=conta.substr(m+f);break}}
var k=contpa.length
for(var u=conts.length;u>0;u--)
{if(conts.lastIndexOf(contpa.substr(k-u))!=-1){partB=contpa.substr(k-u);partA=contpa.substr(0,k-u);break}}
if(conts.length==0)partA=contpa
//显示按要求分好的A、B、C三段内容。
alert(partA)
alert(partB)
alert(partC)
}实际使用的代码比这个要复杂一些。因为想要应付各种特殊情况、考虑周全也不容易呢。
上面代码所取到的conts和contp常常会包含浏览器自动添加的一些\r\n（回车、换行符），这会造成后面“磨”的困难，有必要先进行格式化。但是由于对于
pre、textarea、script、style和xmp这几种标签的内容来说\r\n可能是有意义的，所以不能简单地用.replace(/[\r\n]/g,"")的办法去除。必须既要去除浏览器自动添加的\r\n，又要保全pre、textarea、script和xmp这几种标签的内容。这种局面看起来确实复杂，不过好在浏览器不会在我们要保全的那几种标签的内容里自动添加\r\n，而这个时候原本是罪魁祸首的document.selection.createRange().htmlText的标签自动封闭机制反倒为我们提供了方便：除非选中的内容刚好处于一个标签的内部，否则在conts中将出现完整成对的标签，这样我们就可以比较容易地把位于pre、textarea、script、style和xmp这几种标签中的内容区分出来，只对其他内容进行去除\r\n的操作。而对于选中的内容刚好处于一个标签的内部的这种情况，它的具体情况可能又是五花八门的，我个人采取的办法是把格式化和不格式化都尝试一下，除非格式化的结果令partB长度较长（这说明浏览器自动添加的那些\r\n使“磨”出来的partB长度变短），否则就不格式化。
有时候浏览器自动补全的标签并非添加在选中区域的最外围。例如有时会把</p>结束标签添在</font>标签之前，而这里的</font>标签应该是保留在partB中的，如果把</font>连同</p>一起“磨”掉就不对了。对此采取的办法是检查被“磨”掉的碎渣部分，把碎渣捡起来“磨”好，再装到partB的末尾。
运行演示例
提示：您可以先修改部分代码再运行
Tip： 留心的朋友可能已经想到了：这段代码还可以用于实现
在 “设计/代码” 模式切换过程中，令选中的文字或光标位置保持对应。
成功地实现对内容选中部分的定位之后，接下来要解决的第二个问题是：
根据需要改变选中部分的代码。
HTML代码是由标签组成的，我们需要处理的是对字号大小有影响的标签，可分为6种情况：
1、font标签，毋庸置疑，这个标签需要重点处理；
2、h[1-6]、pre、button、listing、big、small、tt、code、kbd、samp等具有字号改变作用的标签
3、浏览器所能识别的大多数标签在带有style="FONT-SIZE: xxx;"样式属性时将可能对字号大小产生影响；
4、select、input、option和object，这四个标签也可以带上FONT-SIZE样式（算是稀奇古怪的用法），但其效果特殊，应将它们从上一条中排除；
5、sup和sub虽然也会影响字号大小，但是它们的这种影响在重新设置字号时应该被保留，所以对这两个标签无需作处理。
6、其他会造成位于自己前面的font标签的字号效力中断的标签，例如<td>、</td>、<caption>、</caption>、<th>、</th>、<tr>、</tr>、<table>、</table>、<thead>、</thead>、<tbody>、</tbody>、<tfoot>、</tfoot>……还可能有哪些一时也想不起来，慢慢完善吧。
处理过程如下（具体代码见演示例）：
0、在做所有的处理之前，先要将textarea、xmp、script和style标签的内容封印起来，以保护它们不被破坏。
1、处理font标签：
（1）尝试将PartB内的所有font标签配对。（
Tip：这段代码也可以用来做其他的“语法分析”工作）
（2）将所有在PartB内封闭的标签（能配上对的）中的字号属性去除。
（3）将partB中未结束的<font>标签
置标（做上标记）。
（4）将partB中没有配上对的</font>结束标签（开始标签在partA中）置标。
2、处理其他标签：将partB中如前所述的会造成位于自己前面的font标签的字号效力中断的各种HTML标签置标。
3、收尾工作：（怎么？已经结束了吗？）
（1）将上面两步产生的所有置标位置视为“中断点”。
（2）在partB开头和第一个“中断点”之间所夹的内容、最后一个“中断点”和partB末尾之间所夹的内容，以及各个“中断点”之间所夹的内容的前面添上一个行使字号效力的<font ……>，内容的后面添上</font>。
（3）解除textarea、xmp、script和style标签内容的封印。
（4）把partA+partB+partC拼接起来，输出到Editor.document.body.innerHTML。
OK. 一切都搞定了！
完整的运行演示例
提示：您可以先修改部分代码再运行
[经验总结]
我先歇歇，明儿再说吧。
[
本帖最后由 bound0 于 2006-8-25 13:20 编辑 ]
