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
投稿猜你喜欢
1.安装pymysql：pip install pymysql (在命令行窗口中执行)2.卸载pymysql：pip uninstall p- 异步编程带来的问题在客户端Javascript中并不明显，但随着服务器端Javascript越来越广的被使用，大量的异步IO操作使得该问题变
- 前言验证码的种类有很多，它是常用的一种反爬手段，包括：图片验证码，滑块验证码，等一些常见的验证码场景。识别验证码的python 库有很多，用
- 最近两周由于忙于个人项目，一直未发言了，实在是太荒凉了。。。。，上周由于项目，见到Python的应用极为广泛，用起来也特别顺手，于是小编也开
- 一个程序要进行交互，就需要进行输入，进行输入→处理→输出的过程。所以就需要用到输入和输出功能。同样的，在Python中，怎么实现输入和输出？
- 写models.py时缺少了一个 verbose_name，导致数据库出现问题，整了很久，摸索出重新建立数据库的方法：首先删除每个app中的
- 在师兄的推荐下入坑vue.js ，发现不知如何运行GitHub上的开源项目，很尴尬。通过查阅网上教程，成功搭建好项目环境，同时对前段工程化有
-   跨平台的pywifi模块支持操作无线网卡，该模块易于使用，同时支持Windows、Linux等多个系
- 有时需要根据项目的实际需求向spider传递参数以控制spider的行为，比如说，根据用户提交的url来控制spider爬取的网站。在这种情
- 就目前互联网上大小网站而言，大部分都是采用ASP+ACCESS/SQL Server或者PHP+MySQL来编写；事实上，ASP和MySQL
- SHOW STATUS 直接在命令行下登陆MySQL运行SHOW STATUS;查询语句，详细如下图 同样的语句还有SHOW V
- 没有办法，实践证明最好的解决办法是自己写一个OCX控件，这样就只要注册一下OCX控件就可以了，同时OCX控件的可扩展性非常大，也就是给vc\
- 代码如下：<％ myDSN="DSN=xur;uid=xur;pwd=xur"mySQL="s
- 关于DHT协议DHT协议作为BT协议的一个辅助，是非常好玩的。它主要是为了在BT正式下载时得到种子或者BT资源。传统的网络，需要一台中央服务
- 作者： wyh草样出处：https://www.cnblogs.com/wyh0923/p/14084898.html什么是文件文件是系统存
- 1. 表单框类型<!DOCTYPE html><html lang="en"><head&
- 近来，打开微信群发消息，就会秒收到一些活跃分子的回复，有的时候感觉对方回答很在理，但是有的时候发现对方的回答其实是驴唇不对马嘴，仔细深究发现
- 1、构造函数和实例假设你声明一个方法叫做Foo() ,那么我们可以通过new Foo()来声明实例。 functi
- 代码很简单，只是给大家一个思路的，这里就不多废话了，奉上源码：<!DOCTYPE html><html><he
- exec sp_configure 'show advanced options',1 reconfigure exec s
