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开始处可能会有多余的，造成两者对不齐
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长度变短），否则就不格式化。
有时候浏览器自动补全的标签并非添加在选中区域的最外围。例如有时会把结束标签添在标签之前，而这里的标签应该是保留在partB中的，如果把连同一起“磨”掉就不对了。对此采取的办法是检查被“磨”掉的碎渣部分，把碎渣捡起来“磨”好，再装到partB的末尾。
运行演示例 <head><title>HTML在线编辑器任意设置字号大小 - asp之家</title><script>var initHTML ="<H1>《Bound0 全能网页客户端》</H1>《Bound0 全能网页客户端》是一个安装在客户端的可执行程序(EXE)，可以响应网页上的链接和脚本的动作，有很多功能（包括运行本地程序、读写本地文件和注册表等）。 为了防范被滥用或不正当地利用，对《Bound0 全能网页客户端》采用了以下安全措施： 1、《Bound0 全能网页客户端》的安装和注册过程完全在用户知情的条件下进行； 2、每一份售出的《Bound0 全能网页客户端》所具有的实际功能根据具体需要设定，实际不需要的功能不会被开放； 3、《Bound0 全能网页客户端》对网页的响应经过特别限制，不会对授权范围以外的网页做出响应； 4、对每一份售出的《Bound0 全能网页客户端》拷贝均留有记录。 请说明你的具体需要（想要实现什么样的功能），我会做出一个示例网页来让你看，如果觉得确实能够满足需要再购买。"function start() {Editor.document.designMode="ON";Editor.document.open();Editor.document.write(initHTML);Editor.document.close();}/*******************************************************************************************************conts和contp常常会包含浏览器自动添加的一些\r\n（回车、换行符），这会造成后面“磨”的困难，有必要先进行格式化。但是由于对于pre、textarea、script、style和xmp这几种标签的内容来说\r\n可能是有意义的，所以不能简单地用.replace(/[\r\n]/g,"")的办法去除。必须既要去除浏览器自动添加的\r\n，又要保全pre、textarea、script、style和xmp这几种标签的内容。*******************************************************************************************************/function formatfor(va) { var t=va.replace(/\r/g,''); t = t.replace(/(<(script|textarea|xmp|pre|style).*?>)([^\r]*?)(<\/\2>)/img,function (){return arguments[1]+arguments[3].replace(/\n/g, "\r")+arguments[4]}) t = t.replace(/\n/g, ""); return t}/*****************************************Created by Bound0 (bound0@tom.com)http://bbs.blueidea.com/viewthread.php?tid=2661868转载或应用时请保留此声明！*****************************************/function first(){//首先要取得编辑区的内容var oSel = Editor.document.selection.createRange();var conts=oSel.htmlText //内容选中部分对应的代码，首尾可能带有多余标签（就是前面例子中的蓝色标签）。var textLength = Editor.document.body.innerText.lengthoSel.moveStart("character", -1*textLength) //把选择区的开始位置往前闪，再取一次内容var contp=formatfor(oSel.htmlText) //选中部分及选中部分前的内容，末尾可能带有多余标签。var conta=formatfor(Editor.document.body.innerHTML) //整个内容var contpa=''var partC=""var partB=""var partA=""//接下来用上面取得的三个内容互相“磨”，把多余的标签“磨”掉。var m=0m=conta.indexOf(contp.substr(0,3)) //校正对齐contp和conta的开始位置，有时候conta开始处可能会有多余的，造成两者对不齐var f=contp.lengthfor(;f>0;f--){if(conta.substr(m,f)==contp.substr(0, f)){contpa=contp.substr(0,f);partC=conta.substr(m+f);break}}var ko=contp.substr(f)var kol=ko.lengthvar ty=conta.substr(m+f,kol)var hu=""for(var b=1;b<kol;b++)if(ko.substr(b)==ty.substr(0,kol-b)){hu=ko.substr(b);contpa+=hu;partC=partC.substr(kol-b);break}/*****************************************************************************************************有时候浏览器自动补全的标签并非添加在选中区域的最外围。例如有时会把结束标签添在标签之前，而这里的标签应该是保留在partB中的，如果把连同一起“磨”掉就不对了。对此采取的办法是检查被“磨”掉的碎渣部分，把碎渣捡起来“磨”好，再装到partB的末尾。*****************************************************************************************************/var k=contpa.lengthcont=conts.replace(/\n/g, "")var u=cont.lengthif(cont==contpa.substr(k-u)){partB=cont;partA=contpa.substr(0,k-u)}else{for(u=cont.length;u>0;u--){if(cont.lastIndexOf(contpa.substr(k-u))!=-1){partB0=contpa.substr(k-u);partA0=contpa.substr(0,k-u);break}}/*****************************************************************************************************对于选中的内容刚好处于一个标签的内部的这种情况，它的具体情况可能又是五花八门的，我个人采取的办法是把格式化和不格式化都尝试一下，除非格式化的结果令partB长度较长（这说明浏览器自动添加的那些\r\n使“磨”出来的partB长度变短），否则就不格式化。*****************************************************************************************************/contt=formatfor(conts)if(hu!="")if(contt.substr(contt.length-kol)==ko)contt=contt.substr(0,contt.length-kol)+huu=contt.lengthvar youm=contpa.lastIndexOf(contt)if(youm!=-1){partB=contt;partA=contpa.substr(0,youm);partC=contpa.substr(youm+u)+partC}else{for(;u>0;u--){if(contt.lastIndexOf(contpa.substr(k-u))!=-1){partB1=contpa.substr(k-u);partA1=contpa.substr(0,k-u);break}}if(partB1.length>partB0.length){partB=partB1;partA=partA1}else{partB=partB0;partA=partA0}}}if(partB.substr(partB.length-1)=="<"){partB=partB.substr(0,partB.length-1);partC="<"+partC}if(partB.substr(partB.length-2)=="</"){partB=partB.substr(0,partB.length-2);partC="</"+partC}//显示按要求分好的A、B、C三段内容。alert(partA)alert(partB)alert(partC)}</script></head><body SCROLL="no" bgcolor=d0d0c8 onload="start()" leftmargin=5 topmargin=5><IFRAME id="Editor" Name="Editor" style="WIDTH: 550; HEIGHT: 480"></IFRAME><button onclick=first()>先选择一段文字 再点击这个按钮看看</button></body>[提示：你可先修改部分代码，再按运行]

Tip：留心的朋友可能已经想到了：这段代码还可以用于实现在 “设计/代码” 模式切换过程中，令选中的文字或光标位置保持对应。

第一页上一页 1

3 下一页

标签：在线编辑器,字号

投稿

HTML在线编辑器任意设置字号大小（2）

猜你喜欢

用JS访问操作iframe框架里的dom

设计良好网页的4项原则

ASP如何操作Excel（读取，输出）

如何使用XML实现多渠道接入网站的构架

ASP中DLL的调试环境配置全攻略

简单的网站页面有什么好处

判断数据库里存在的BIG5码

JS 显示当前日期+星期（静态）

asp如何在ADO中客户端利用好缓存技术？

如何在页面中快捷地添加翻页按钮？

Ajax缓存和编码问题的最终解决方案

mysql: 安装后的目录结构

合理关闭XHTML标签

快速解决 MySQL中与浮点比较有关的问题

css表单中textarea域背景图片设置方法

如何处理包含JavaScript语句时的间隔符？

段正淳的css笔记(7)-表单在各浏览器的表现统一

ASP 80040e14错误的解决方法

CSS.JS文件发布机制的思考

美之鉴 – 女人与Web设计