详探TextRange对象--用execCommand()执行命令
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>
