网站公告列表

没有公告

加入收藏
设为首页
联系站长
轻松学电脑>>网页制作>>其它教程>>[突破]在线编辑器任意设置字号
双击滚屏阅读

[突破]在线编辑器任意设置字号
>就是前面例子中红色的部分)、partC—选中内容之后的内容所对应的代码。(在全选的时候,partA和partC都是空字符串;选中内容为空的时候,从开头到光标位置的内容所对应的代码是partA,partB为空字符串,光标之后的内容所对应的代码是partC

看看主要的代码:

CODE:

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的末尾。

运行演示例:

运行代码框