紧急求助：ff下的range怎样调用execcommand（）???? 急！急！急

Question

本帖最后由 bingfenghzy 于 2010-07-30 19:45:18 编辑

Answer 1

FF下不支持execCommand，楼主换一种方法吧
rang.style.foreColor="#0066cc";

Answer 2

可以这么做
var sel = window.getSelection();
sel.removeAllRanges()
sel.addRange(range)//这个参数就是你的range
document.execCommand('ForeColor',false,'#0066cc');

Answer 3

rang是什么？是个div等标签就可以。
<div id="rang"><div>
document.getElementById("rang").style.color="#0066cc";

Answer 4

range是用createRange创建出来的，不是一般的id为“range”的div。

Answer 5

<script language='javascript'>
function test()
{ 
         edit_div_obj=document.getElementById('edit_div');
         if(document.createRange)  //ff下创建range
 {
        var edit_div_range=document.createRange();
  }
  else                     //IE下创建range
  {
        var edit_div_range=document.body.createTextRange();
  }
          /******************这是ff下处理方法   
  edit_div_range.selectNode(edit_div_obj);
          //下面语句执行不成功
          edit_div_range.execCommand('ForeColor',false,'#0066cc');
          */
          
          /*******************这是IE下的处理方法 下面代码在IE可以执行成功
  edit_div_range.moveToElementText(edit_div_obj);
          edit_div_range.execCommand('ForeColor',false,'#0066cc');
          */
}
</script>
 
   <div id="edit_div" class='input-class2' contentEditable=true >
        gfcgcgf
   </div>   <input id="button1" type="button" value="测试" onclick="javascript:test();" />

Answer 6

首先你的forecolor必须要全部小写，还有就是你的颜色值不对，如下代码就可以，你在试试看
document.execCommand('forecolor',false,'blue');

Answer 7

edit_div_range.execCommand('ForeColor',false,'#0066cc');
这个在FF下根本不能执行！
错误提示edit_div_range.execCommand is not a function

Answer 8

我侧过可以的啊
<DIV id="test" contentEditable="true">abcde</DIV>
<SCRIPT>
var input = document.getElementById('test');
var sel = window.getSelection(); 
sel.collapse(input.childNodes[0], 0);
sel.extend(input.childNodes[0], 2);
document.execCommand('forecolor',false,'#0066cc');
</SCRIPT>

Answer 9

我的例子中没有修改selection中的range当时已经很说明问题了

Answer 10

其实我就是想实现在线编辑器的功能，我看到腾讯的WEBQQ聊天时聊天窗口的在线编辑器很好，能插入图片之类的，不知道是怎么做的？应该是使用了range之类的，不知道是不是这样的。

Answer 11

<script>
function test()
{  
edit_div_obj=document.getElementById('edit_div');
if(window.getSelection)
{
    var sel = window.getSelection();
    sel.collapse(edit_div_obj, 0);
    sel.extend(edit_div_obj, 1);
    document.execCommand('forecolor',false,'#0066cc');
sel.collapse(edit_div_obj, 0);
} 
else
{    
    var edit_div_range=document.body.createTextRange();
    edit_div_range.moveToElementText(edit_div_obj);
    edit_div_range.execCommand('forecolor',false,'#0066cc');
}
}
</script>  
<div id="edit_div" class='input-class2' contentEditable=true >
gfcgcgf
</div>
<input id="button1" type="button" value="测试" onclick="javascript:test()" /> 
楼主你的代码中有很多错误，FF是没有createtextRange方法的，代码执行到那就失败了，我修改了，可以了

Answer 12

非常感谢哈！经过测试：在ie下可以的。但在FF下，输入内容时若加回车，则点击button时，回车后输入的内容不会变颜色。
同时问一下：sel.extend(edit_div_obj, 1);这句什么意思？从网上查不到啊！第二个参数是上面意思？
谢谢！

Answer 13

这个比较复杂的，第一个参数指定节点，第二个参数是偏移量，FF下一个DIV中的文本可能会被解析为多个TextNode，所以你的第一个参数需要输入sel.collapse需要输入其实位置所在的文本节点，以及结束位置
sel.extend同理
我这边有一片搏客，论述了如何在DIV中设置光标位置，这种场景下无非就是其实位置=结束位置的特殊情况，你参考一下
http://blog.csdn.net/reedseutozte/archive/2010/08/01/5780403.aspx

Answer 14

呵呵，太感谢了，我修改了一下，在FF下就不会出现无法修改回车后输入的内容的颜色了<script>
function test()
{  
    edit_div_obj=document.getElementById('edit_div');
    if(window.getSelection)
    {
         var sel = window.getSelection();
         var nodes=edit_div_obj.childNodes;    //获取edit_div_obj下的所有节点
 var nodes_num=nodes.length;
 
 sel.collapse(edit_div_obj, 0);
         sel.extend(edit_div_obj, nodes_num);
         document.execCommand('forecolor',false,'#0066cc');
         sel.collapse(edit_div_obj, 0);
     } 
     else
     {    
         var edit_div_range=document.body.createTextRange();
         edit_div_range.moveToElementText(edit_div_obj);
         edit_div_range.execCommand('forecolor',false,'#0066cc');
     }
}
</script>  
<div id="edit_div" class='input-class2' contentEditable=true >
gfcgcgf
</div>
<input id="button1" type="button" value="测试" onclick="javascript:test()" />我的理解是:
   sel.collapse(edit_div_obj, i); 这个设置是指sel从edit_div_obj的第i个节点开始。
   sel.extend(edit_div_obj, j);   这个设置是指sel在edit_div_obj的第j个节点结束。
   即sel表示的范围为从edit_div_obj的第i个节点到第j个节点。
  document.execCommand('forecolor',false,'#0066cc'); 这个是对范围sel执行execcommand();
  
  但仍然不清楚为什么这里的execcommand是对这个sel进行操作的呢？
  望帮忙解答一下。
  还不知道我的理解对不对哈!

Answer 15

给你两篇文章看看，
http://kjah.javaeye.com/blog/420624
http://kjah.javaeye.com/blog/422509
是解释range对象的，但是对于selection也是一样的，应该比较好的解释了collapse，和extend的两个参数的作用
FF下document.execCommand就是对你所选中的区域进行操作，chrome也是这样的

Answer 16

这个JS方法是有兼容性问题的，而且有时候 FF 的安全性较高，呵呵
lz可以看看这个方法支持性的列表：
http://www.quirksmode.org/dom/execCommand.html

Answer 17

从上面的支持情况上看，FF是支持 forecolor的设置的
估计lz你的错误是出在 range 上了
不知道 lz 的 range 是不是用的IE特有的 createTextRange 呢？

Answer 18

lz可以看看这个测试页，比较全：
http://www.quirksmode.org/dom/execCommand/