详探TextRange对象--用execCommand()执行命令

<script language="javascript"> function runCode(obj) { var tempWin = window.open("","_blank"); tempWin.document.open("text/html","replace"); tempWin.document.writeln(obj.innerText); tempWin.document.close(); } </script>

1.2D-Position 允许通过拖曳移动绝对定位的对象

命令document.execCommand("2D-Position",false,true)能打开文档的2D定位，当容器的contentEditable标记为true时，可以拖动容器内的控件、改变控件大小、编辑控件文本内容。第3个参数设置为true时可以拖动元素，否则不能。

要注意：2D定位只对样式设置为Position:absolute的元素有效

示例:

< script >
document.execCommand( " 2D-Position " , false , true );
</ script >

< div  contentEditable =true >
　  < p  style ="background-color:silver;position:absolute" > 可移动段落 </ p >
　  < input  type ="button"  value ="可移动按钮"  style ="position:absolute" >
</ div >

2.BackColor 设置或获取当前选中区的背景颜色

示例:

< script >
function  bgcolor()
{
     var  rng  =  document.selection.createRange();
    rng.execCommand( ' BackColor ' , ' false ' , ' silver ' );
}
</ script >

亮少有逸群之才，英霸之器，身长八尺，容貌甚伟，时人异焉。 < br >
< input  type ="button"  value ="选中部分文本后点击"  onClick ="bgcolor()" >

3.Bold 切换当前选中区的粗体

这个方法执行后可以将指定文本设置为Bold，如果在已经设置为Bold上再次执行该命令，则可以取消Bold状态

示例:

< script >
function  setBold()
{
     var  rng  =  document.selection.createRange();
    rng.execCommand( ' Bold ' );
}
</ script >

自董卓造逆以来，天下豪杰并起。曹操势不及袁绍，而竟能克绍者，非惟天时，抑亦人谋也 < br >
< input  type ="button"  value ="选中部分文本后点击"  onClick ="setBold()" >

4.Copy 将当前选中区复制到剪贴板

示例:

< script >
function  copyText()
{
     var  rng  =  document.selection.createRange();
    rng.execCommand( ' Copy ' );
    alert( " 当前拷贝的文本是: " + rng.text);
}
</ script >

今操已拥百万之众，挟天子以令诸侯，此诚不可与争锋。孙权据有江东，已历三世，国险而民附，此可用为援而不可图也 < br >  
< input  type ="button"  value ="拷贝"  onClick ="copyText()" >

5.CreateLink 在当前选中区上插入超级链接，并显示一个对话框让用户输入URL

示例:

< script >
function  setLink()
{
     var  rng  =  document.selection.createRange();
     if (rng.text != "" )
    {
        rng.execCommand( ' CreateLink ' );
         if (confirm( ' 在新窗口打开链接吗? ' ))
        {    
            rng.parentElement().outerHTML  =  rng.parentElement().outerHTML.replace( " <A " , " <A target='_blank'  " );
             // 这里要注意一定要使用赋值的方式，否则直接调用replace()函数，并不能改变原有值。它们是不同的副本
        }
    }    
    
}

</ script >

荆州北据汉、沔，利尽南海，东连吴会，西通巴、蜀，此用武之地，非其主不能守；是殆天所以资将军，将军岂有意乎？益州险塞，沃野千里，天府之国，高祖因之以成帝业；今刘璋暗弱，民殷国富，而不知存恤，智能之士，思得明君。                                          
< input  type ="button"  value ="创建链接"  onClick ="setLink();" >

6.Cut 在当前选中区上执行"剪切"

示例:

< script >
function  cutText()
{
     var  rng  =  document.selection.createRange();
    rng.execCommand( ' Cut ' );
}
</ script >

将军既帝室之胄，信义著于四海，总揽英雄，思贤如渴，若跨有荆、益，保其岩阻，西和诸戎，南抚彝、越，外结孙权
，内修政理；待天下有变，则命一上将将荆州之兵以向宛、洛，将军身率益州之众以出秦川，百姓有不箪食壶浆以迎将
军者乎？
< input  type ="button"  value ="剪切"  onClick ="cutText()" >< br >
< input >

7.Delete 删除当前选中区

示例:

< script >
function  delText()
{
     var  rng  =  document.selection.createRange();
    rng.execCommand( ' Delete ' );
}
</ script >

诚如是，则大业可成，汉室可兴矣。此亮所以为将军谋者也。惟将军图之
< input  type ="button"  onClick ="delText()"  value ="删除所选文本" >

8.FontName 设置或获取当前选中区的字体

示例:

< script >
function  getFontName()
{
     var  rng  =  document.selection.createRange();
    rng.execCommand( ' FontName ' , true , ' 幼圆 ' );
     var  temp  =  rng.queryCommandValue( ' FontName ' );
    alert( " 你设置的字体是: " + temp);
}
</ script >

言罢，命童子取出画一轴，挂于中堂，指谓玄德曰：“此西川五十四州之图也。将军欲成霸业，北让曹操占天时，南让孙权占地利，将军可占人和。
< input  type ="button"  onClick ="getFontName()"  value ="设置字体为幼圆" >

9.FontSize 设置或获取当前选中区的字体大小

这个命令接受的参数是1-7号字，超过7的参数也将被转换成7号字来处理

示例:

< script >
function  setFontSize()
{
     var  rng  =  document.selection.createRange();
    rng.execCommand( ' FontSize ' , true , ' 11 ' );
     var  temp  =  rng.queryCommandValue( ' FontSize ' );
    alert( " 字体大小是: " + temp);
}
</ script >

言罢，命童子取出画一轴，挂于中堂，指谓玄德曰：“此西川五十四州之图也。将军欲成霸业，北让曹操占天时，南让孙权占地利，将军可占人和。
< input  type ="button"  onClick ="setFontSize()"  value ="设置字体大小" >

10.ForeColor 设置或获取选中区的前景(文本)颜色

其实也可以通过queryCommandValue()获得颜色值，不过格式是10进制数，需要的时候可以转换成16进值

示例:

< script >
function  setForeColor()
{
     var  rng  =  document.selection.createRange();
    rng.execCommand( ' ForeColor ' , true , ' blue ' );
     var  temp  =  rng.queryCommandValue( ' ForeColor ' );
    alert( " 颜色值: " + temp);
}
</ script >

先取荆州为家，后即取西川建基业，以成鼎足之势，然后可图中原也
< input  type ="button"  onClick ="setForeColor()"  value ="设置前景色" >

11.FormatBlock 设置当前块格式化标签

示例:

< script >
function  formatBlock()
{
     var  rng  =  document.selection.createRange();
    rng.execCommand( ' FormatBlock ' , false , ' <h2> ' );
}
</ script >

< p > 段落一 </ p >
< p > 段落二 </ p >
< input  type ="button"  value ="格式化为h2"  onClick ="formatBlock();" >

12.Indent 增加选中文本的缩进

示例:

< script >
function  increaseIndent()
{
     var  rng  =  document.selection.createRange();
    rng.execCommand( ' Indent ' );
}
</ script >

< p > 自你走后心憔悴 </ p >
< p > 白色油桐风中纷飞 </ p >
< input  type ="button"  onClick ="increaseIndent();"  value ="增加所选文本缩进" >

13.InsertButton 插入按钮覆盖当前选中区

与此相同的还有一个命令InsertInputButton，也是插入一个按钮，不过InsertButton是<Button>标签，InsertInputButton是<input type="button">标签

示例:

< script >
function  insertButton()
{
     var  rng  =  document.selection.createRange();
    rng.execCommand( ' InsertButton ' , false , ' btn ' );
     // rng.execCommand('InsertInputButton',false,'btn');
    btn.value  =   " 新插入的按钮 " ;
}
</ script >

权即见肃，与语甚悦之。众宾罢退，肃亦辞出，乃独引肃还，合榻对饮
< input  type ="button"  value ="插入按钮"  onClick ="insertButton()" >

14.InsertInput系列

包括有InsertInputCheckbox(复选框控件)、InsertInputFileUpload(文件上载控件)、InsertInputHidden(隐藏控件)、InsertInputImage(图像控件)、InsertInputPassword(密码控件)、InsertInputRadio(单选按钮控件)、InsertInputReset(重置控件)、InsertInputSubmit(提交控件)、InsertInputText(文本框控件)

示例:

< script  language ="javascript" >
function  insertInput(str)
{
     var  rng  =  document.selection.createRange();
     switch (str)
    {
         case   ' Checkbox ' :
        rng.execCommand( ' InsertInputCheckbox ' , false , ' chkBox ' );
        chkBox.checked  =   true ;
         break ;

         case   ' FileUpload ' :
        rng.execCommand( ' InsertInputFileUpLoad ' , false , ' fileUp ' );
         break ;    

         case   ' Hidden ' :
        rng.execCommand( ' InsertInputHidden ' , false , ' hidd ' );
        hidd.value  =   " 这是一个隐藏值 " ;
        alert(hidd.value);
         break ;

         case   ' Image ' :
        rng.execCommand( ' InsertInputImage ' , false , ' img ' );
        img.src  =   " http://www.baidu.com/img/logo.gif " ;
         break ;

         case   ' Password ' :
        rng.execCommand( ' InsertInputPassword ' , false , ' pwd ' );
         break ;

         case   ' Radio ' :
        rng.execCommand( ' InsertInputRadio ' , false , ' rbtn ' );
        rbtn.checked  =   true ;
         break ;

         case   ' Reset ' :
        rng.execCommand( ' InsertInputReset ' , false , ' reset ' );
         break ;

         case   ' Submit ' :
        rng.execCommand( ' InsertInputSubmit ' , false , ' refer ' );
        refer.value  =   ' 提交按钮 ' ;
         break ;

         case   ' Text ' :
        rng.execCommand( ' InsertInputText ' , false , ' txt ' );
        txt.value  =   ' 一个文本框 ' ;
         break ;
    }
}
</ script >

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
< input  type ="button"  value ="插入复选框"  onClick ="insertInput('Checkbox')" >< p >
< input  type ="button"  value ="插入文件上载控件"  onClick ="insertInput('FileUpload')" >< p >
< input  type ="button"  value ="插入隐藏控件"  onClick ="insertInput('Hidden')" >< p >
< input  type ="button"  value ="插入图像控件"  onClick ="insertInput('Image')" >< p >
< input  type ="button"  value ="插入密码控件"  onClick ="insertInput('Password')" >< p >
< input  type ="button"  value ="插入单选框"  onClick ="insertInput('Radio')" >< p >
< input  type ="button"  value ="插入重置按钮"  onClick ="insertInput('Reset')" >< p >
< input  type ="button"  value ="插入提交按钮"  onClick ="insertInput('Submit')" >< p >
< input  type ="button"  value ="插入文本框"  onClick ="insertInput('Text')" >< p >