HTML在线编辑器任意设置字号大小(3)
作者:bound0 来源:蓝色理想 发布时间:2007-08-29 19:55:00
标签:在线编辑器,字号
成功地实现对内容选中部分的定位之后,接下来要解决的第二个问题是:根据需要改变选中部分的代码。
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. 一切都搞定了!
完整的运行演示例[提示:你可先修改部分代码,再按运行]
0
投稿
猜你喜欢
- 开发新版本 Vue 项目推荐你使用 Vite 脚手架构建开发环境,然而 Vite 脚手架更倾向于构建纯 Web 页面,而不是桌面应用,因此开
- 这篇文章主要介绍了python自动化unittest yaml使用过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参
- 使用 IE8 时发现其原生的 JSON 解析器存在 Bug,让我们先用 IE8 打开 DEMO 页面体验下。http://lab.grace
- API的设计是一个艺术活。往往需要其简单、易懂、整洁、不累赘。很多时候,我们在底层封装一个方法给高层用,而其它的方法只是为了辅助这个方法的。
- 数据丢失(缺失)在现实生活中总是一个问题。 机器学习和数据挖掘等领域由于数据缺失导致的数据质量差,在模型预测的准确性上面临着严重的问题。 在
- 目录前言typeof是否能正确判断类型?instanceof是否能正确判断类型?Object.prototype.toString.call
- 把程序放到一个文件中,然后包含再call就可以了。(JMAIL4.3)<%'警告函数sub w_msg(messag
- 本文介绍的圆角方法很特别,有创意。昨天群里大家讨论到一个豆瓣上的按钮,下面这个。在这里用到了不同宽度的按钮,但是只是用到了一个图片。&nbs
- 如果直接在命令行中利用input和raw_input读入一个文件来处理,并且想要采用直接将文件拖入命令行来处理的方式,input方法可以直接
- 目录1、mysqldump执行过程:特点2、导出 CSV 文件(最灵活)执行过程特点3、物理拷贝(最快)过程局限总结1、mysqldump执
- 串口简述异步串行是指UART(Universal Asynchronous Receiver/Transmitter),通用异步接收/发送。
- 在命令行输入以下代码:pythonimport cv2cv2.__version__来源:https://blog.csdn.net/dlh
- DELETE 语句DELETE 语句用于删除记录,语法如下:(与 “UPDATE” 语法较为相似)D
- Python zfill()方法返回指定长度的字符串,原字符串右对齐,前面填充0。zfill()方法语法:str.zfill(width)参
- 所以就怀疑是否编码问题,或者文件权限问题,或者是不是函数不支持问题,经过排查发现原来是万网的L1主机不支持fsockopen,在文件uc_c
- 1、使用系统函数__import_()stringmodule = __import__('string')2、使用imp
- update()方法添加键 - 值对到字典dict2。此函数不返回任何值。语法以下是update()方法的语法:dict.upd
- Python自带一个轻量级的关系型数据库SQLite。这一数据库使用SQL语言。SQLite作为后端数据库,可以搭配Python建网站,或者
- 一、Set 集合类型Set 集合类型 (交差并补) 特点 :无序 , 自动去重集合用{}表示,元素间用逗号分隔建立集合类型用{}或set()
- 关于DHT协议DHT协议作为BT协议的一个辅助,是非常好玩的。它主要是为了在BT正式下载时得到种子或者BT资源。传统的网络,需要一台中央服务