运行演示例:
运行代码框
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
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. 一切都搞定了!
完整的运行演示例:
运行代码框
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
经典论坛讨论: http://bbs.blueidea.com/thread-2661868-1-1.html
出处:蓝色理想
责任编辑:moby
上一页 解决之道 [上] 下一页
◎进入论坛网页制作、网站综合版块参加讨论
|