TextRange对象的学习（一）

来源：互联网发布：台服dnf登陆器源码编辑：程序博客网时间：2024/05/17 12:50

这两天为了解决FCKeditor中粘贴弹出“是否允许访问剪贴板的内容”时，无意中接触到了DHTML中的TextRange这个对象（代表 HTML 元素中的文本），对代码很是不明白，才抽时间学习了这个，下面是我在网上找资料并且自己学习心得

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><script src="lib/jquery-1.6.4.min.js" type="text/javascript"></script><script type="text/javascript">$(document).ready(function(){});function rdl_doSelect() {    var oMessage = document.all("oMessage");//在body标签下面创建TextRange对象,含有htmlText和text两个属性，代表创建范围内的文本内容    var oTextRange = document.body.createTextRange();alert(oTextRange.htmlText);//弹出的信息是body标签内的所有内容包含html标签    with(oTextRange) {        moveToElementText(oMessage);//将oTextRange的返回限定在oMessage对象上，即id为oMessage的组件//弹出的信息为id为oMessage的组件的信息内容，对象还是之前创建的oTextRange，只是改变了其范围alert(htmlText);//由于这里使用了with,可以省略oTextRange，实际完整写法是oTextRange.htmlText//表示在oTextRange对象的范围内容进行全部选择操作，这个命令可以查看帮助文档，有很多，当然有些还是不支持的        execCommand("SelectAll");    }}function rdl_doClear() {//selection是document的一个对象，clear()表示要清除选中区的内容。//因此不执行选中方法，则执行清楚方法效果是看不出来的，当然也可以用鼠标执行选中操作。    document.selection.clear();}</script><title>无标题文档</title></head><body><span id=oMessage>我是要被清除的信息。</span><br><br><input type=button value=" 选择 " onclick="rdl_doSelect();">&nbsp;<input type=button value=" 清除 " onclick="rdl_doClear();"></body></html>

TextRange对象可以缩小自己的文本范围，然后再执行一些命令，可以完成“界面操作”

<HTML><HEAD><TITLE>JavaScript--execCommand指令集</TITLE><SCRIPT LANGUAGE="javascript"> <!--/**该function执行copy指令*/function fn_doufucopy(){edit.select();document.execCommand('Copy');}/**该function执行paste指令*/function fn_doufupaste() { tt.focus();document.execCommand('paste');} /**该function用来创建一个超链接*/function fn_creatlink(){document.execCommand('CreateLink',true,'true');//弹出一个对话框输入URL//document.execCommand('CreateLink',false,'http://www.51js.com');}/**该function用来将选中的区块设为指定的背景色*/function fn_change_backcolor(){document.execCommand('BackColor',true,'#FFbbDD');//true或false都可以}/**该function用来将选中的区块设为指定的前景色,改变选中区块的字体大小,改变字体,字体变粗变斜*/ function fn_change_forecolor(){//指定前景色document.execCommand('ForeColor',false,'#BBDDCC');//true或false都可以//指定背景色document.execCommand('FontSize',false,7);   //true或false都可以//字体必须是系统支持的字体document.execCommand('FontName',false,'标楷体');   //true或false都可以//字体变粗document.execCommand('Bold');//变斜体document.execCommand('Italic');}  /*  *该function用来将选中的区块加上不同的线条  */ function fn_change_selection(){//将选中的文字加下划线document.execCommand('Underline');//在选中的文字上划粗线document.execCommand('StrikeThrough');//将选中的部分文字变细document.execCommand('SuperScript');//将选中区块的下划线取消掉document.execCommand('Underline'); }  /*    *该function用来将选中的区块排成不同的格式    */ function fn_format(){//有序列排列document.execCommand('InsertOrderedList');//实心无序列排列document.execCommand('InsertUnorderedList');//空心无序列排列document.execCommand('Indent');}/**该function用来将选中的区块剪下或是删除掉*/function fn_CutOrDel(){//删除选中的区块//document.execCommand('Delete');//剪下选中的区块document.execCommand('Cut');}/**该function用来将选中的区块重设为一个相应的物件*/function fn_InsObj(){/******************************************** 以下指令都是为选中的区块重设一个object;* 如没有特殊说明,第二个参数true或false是一样的;* 参数三表示为该object的id;* 可以用在javascript中通过其指定的id来控制它*******************************************//*重设为一个button(InsertButton和InsertInputButtong一样,只不前者是button,后者是input)*//*document.execCommand('InsertButton',false,"aa"); //true或false无效document.all.aa.value="风舞九天";*///重设为一个fieldset/*document.execCommand('InsertFieldSet',true,"aa");document.all.aa.innerText="刀剑如梦";*///插入一个水平线//document.execCommand('InsertHorizontalRule',true,"aa");//插入一个iframe//document.execCommand('InsertIFrame',true,"aa");//插入一个InsertImage,设为true时需要图片,false时不需图片//document.execCommand('InsertImage',false,"aa");//插入一个checkbox//document.execCommand('InsertInputCheckbox',true,"aa");//插入一个file类型的object//document.execCommand('InsertInputFileUpload',false,"aa");//插入一个hidden/*document.execCommand('InsertInputHidden',false,"aa");alert(document.all.aa.id);*///插入一个InputImage/*document.execCommand('InsertInputImage',false,"aa");document.all.aa.src="F-a10.gif";*///插入一个Password//document.execCommand('InsertInputPassword',true,"aa");//插入一个Radio//document.execCommand('InsertInputRadio',false,"aa");//插入一个Reset//document.execCommand('InsertInputReset',true,"aa");//插入一个Submit//document.execCommand('InsertInputSubmit',false,"aa");//插入一个input text//document.execCommand('InsertInputText',false,"aa");//插入一个textarea//document.execCommand('InsertTextArea',true,"aa");//插入一个 select list box//document.execCommand('InsertSelectListbox',false,"aa");//插入一个single selectdocument.execCommand('InsertSelectDropdown',true,"aa");//插入一个line break(硬回车??)//document.execCommand('InsertParagraph');//插入一个marquee/*document.execCommand('InsertMarquee',true,"aa");document.all.aa.innerText="bbbbb";*///用于取消选中的阴影部分//document.execCommand('Unselect');//选中页面上的所有元素//document.execCommand('SelectAll');}/**该function用来将页面保存为一个文件*/function fn_save(){//第二个参数为欲保存的文件名document.execCommand('SaveAs','mycodes.txt');//打印整个页面//document.execCommand('print');}--> </SCRIPT>      </HEAD>      <body>          <input id="edit" value="范例" NAME="edit"><br>          <button onclick="fn_doufucopy()" ID="Button1">Copy</button> <button onclick="fn_doufupaste()" ID="Button2">               paste</button><br>          <textarea id="tt" rows="10" cols="50" NAME="tt"></textarea>          <hr>          <br>          浮沉聚散变化又再,但是总可卷土重来.<br>          天若有情天亦老,人间正道是沧桑.<br>          都怪我,太执着,却也等不到花开叶落.<br>          <br>          Please select above letters, then click following buttons:<br>          <hr>          <input type="button" value="创建CreateLink" onclick="fn_creatlink()" ID="Button3" NAME="Button3"><br>          <input type="button" value="改变文字背景色" onclick="fn_change_backcolor()" ID="Button4" NAME="Button4"><br>           <input type="button" value="改变文字前景色" onclick="fn_change_forecolor()" ID="Button5" NAME="Button5"><br>          <input type="button" value="给文字加线条" onclick="fn_change_selection()" ID="Button6" NAME="Button6"><br>          <input type="button" value="改变文字的排列" onclick="fn_format()" ID="Button7" NAME="Button7"><br>          <input type="button" value="删除或剪下选中的部分" onclick="fn_CutOrDel()" ID="Button8" NAME="Button8"><br>          <input type="button" value="插入Object" onclick="fn_InsObj()" ID="Button9" NAME="Button9"><br>          <input type="button" value="保存或打印文件" onclick="fn_save()" ID="Button10" NAME="Button10"><br>          <input type="button" value="测试Refresh属性" onclick="document.execCommand('Refresh')" ID="Button11" NAME="Button11">      </body> </HTML>

选中需要修改的范围，然后点击按钮，就能改变页面的内容——自己用鼠标选择范围，很是有意思