HTML在线编辑器任意设置字号大小（2）
作者：bound0 来源：蓝色理想 发布时间：2007-08-29 19:55:00
多好，随着灵光一闪，战略上的大问题在一秒钟之内就被我们搞定了！接下来让我们看看具体的实现方法吧：
要想通过改变Editor.document.body.innerHTML来给选中的内容设置字号大小，首先要解决的一个问题是在Editor.document.body.innerHTML中对选中内容所对应的代码进行定位。这算不上是个超级复杂的问题，但我知道对这个问题的解答也是很多人梦寐以求的。或许能有很多种解，下面给出我Bound0的办法。
显然这个问题不可以像一些人想象的那样随随便便地用正则或者查找之类的方法就搞定，设想我在
Bound0000000000000000000000000000000000000000000000000000中随便选中了一个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： 留心的朋友可能已经想到了：这段代码还可以用于实现在 “设计/代码” 模式切换过程中，令选中的文字或光标位置保持对应。
0
投稿猜你喜欢
今天我和中国著名画家"渔人"谈了一个关于"怎样才能设计好"的问题,他给我说了一句话,得益不浅,那句话- jQuery居然都没有JSON的decode和encode，精确类型判断也没有，囧……自己动手写吧！不过这些东西在网上都已经有很好的版本了，
- 友情提示，您阅读本篇博文的先决条件如下：1、本文示例基于Microsoft SQL Server 2008 R2调测。2、具备 Transa
- 孤立帐户，就是某个数据库的帐户只有用户名而没有登录名，这样的用户在用户库的sysusers系统表中存在，而在master数据库的syslog
- 本教程中将详细阐述传统的图形设计元素是如何应用在现代（2.0时代）的页面设计中的，然后我将解释为什么它们能流行开来，以及如何、何时、在哪里使
- 代码如下:SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON GO /* by kudychen 2
- 文章主要讲术了一些SQL Server新的Bug，帮您认识这些被忽略的SQL Server注入技巧。1．关于Openrowset和Opend
- 数据库连接：<％ set conn=server.createobject("adodb.connection&q
- 根据Nicholas的说法，有四种代码会拖慢脚本的运行，并最终导致脚本失控。分别是次数过多的同步循环、庞大的函数体、不恰当的递归和不合理的D
- 使用timer来统计asp页面程序的运行时间。实例代码和说明见下：<％Dim varInitial_TimevarIniti
- 昨天晚上在家里把WM设计好的好台界面做成Html，在家里只用IE8和FF做了测试，感觉还行，除了感觉IE8还不成熟，渲染比较慢且不稳定外，标
- 这个主要应用于，获取用户输入的时候，防止用户不小心，多输入了一个空格，导致验证无法通过，多用于用户名跟密码的，好多情况下，大家复制的winr
- 向数据库加入字符类型的数据时，我老爱写错数据中含有单引号的语句而导致操作失败像：正确的SQL语句：INSERT baby
- 此文主要讲述的是SQL Server连接中经常出现的3个常见错误，以及对这三个错误的详细分析，如果你其心存好奇的话，以下的文章将会揭开它的神
- 第一次写技术博客，有不尽如人意的地方，还请见谅和指正。为什么想整理这方面的类容，我觉得就像油画家要了解他的颜料和画布、雕塑家要了解他的石材一
- 过滤非法的SQL字符的函数代码:'*************************************************
- 从publish 表中取出第 n 条到第 m 条的记录的sql语句写法：SELECT TOP m-n+1 *&
- 数据库计算机 databasecomputer 实现数据库的存储、管理和控制的一种专用计算机系统。它能十分快速而有效地完成各种数据库操作，并
- 在ASP中加密方法有对应的解密方法好象不多,现在根据前辈资料整理出在asp中加密与解密函数，根据RSA 算法实现的。什么是RSA？
- 这段时间在处理SQL server 2000 SP4补丁打不上的问题上花了不少时间，回头想想应该总结一下：系统说明：dell1800服务器，
