关于TextRange的解析？

[jiezi316]

我们在使用HTML编辑器的时候往往会发现这样一个功能，就是你选择一句话或者一段文字，如果这个文字有加粗，斜体等样式，那么HTML编辑器相应的按钮（例如：加粗和斜体功能按钮）就会高亮的标示出来，以方便我们操作
这个是怎么实现的呢？

[zjsfdxbao]

我的想法比较普通,一直往上面找parentElement,只要找到<B>标签那就高亮显示加粗,或者解析该元素的style

[hrdesign]

如果你用Range对象的话，对于IE，通过document.selection.createRage()创建Range对象获取选择的文本，然后在创建个Range对象对其进行处理，大致是这样的(比如加粗)：
<script type="text/javascript">
function bold(){
var range1 = document.selection.createRange().text;
var range2 = document.body.createTextRange();
range2.findText(range1)
range2.pasteHTML('<b>'+range1+'</b>');
}
</script>
<div onclick = 'bold()'>fafafafafdfadfsdfkasdjfjaskdfjkasdjfksadjkfjk</div>

你可以测试一下这个代码，只针对IE啊

[jiezi316]

晕倒，我问的不是如何实现对选择的文本加粗，而是问根据选择的文本是否含有加粗，斜体等样式，来设置编辑器上的对应的工具按钮。
比如 html是 <strong>nihao</strong>,那么我在编辑器里选择了nihao这句话，那么编辑器上加粗的按钮就应该是高亮。表示改段文本已经设置过加粗的样式了。

[rjzou2006]

结贴吧！

[jiezi316]

算了，我自己已经解决了结贴吧！哎~~~~~

[hrdesign]

呵呵，刚来上班。这样啊，原理一样的，首先选取选择文字的Range对象document.selection.createRage()的文本，然后然后在创建个Range对象对其进行处理，哪你说的Strong为例（IE）：
<script type="text/javascript">
function bold(){
var range1 = document.selection.createRange().text;
var range2 = document.body.createTextRange();
if(range1){
range2.findText(range1)
if(range2.parentElement().nodeName.toLowerCase() == 'strong'){
document.getElementById('boldimg').style.border='solid 1px red'
}else{
document.getElementById('boldimg').style.border='0'
}
}
}
</script>
<span id="boldimg">加粗按钮</span>（当选取了粗体时显示个边框）
<div onclick = 'bold()'>fafafafaf<strong>dfadfsdfkasd</strong>jfjaskdfjkasdjfksadjkfjk </div>

[jiezi316]

不是的，
是利用queryCommandState这个来判断