关于TextRange的解析？

Question

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

Answer 1

如果你用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啊

Answer 2

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

Answer 3

呵呵，刚来上班。这样啊，原理一样的，首先选取选择文字的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> 

Answer 4

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