1.2D-Position 允許通過(guò)拖曳移動(dòng)絕對定位的對象
命令document.execCommand("2D-Position",false,true)能打開(kāi)文檔的2D定位，當容器的contentEditable標記為true時(shí)，可以拖動(dòng)容器內的控件、改變控件大小、編輯控件文本內容。第3個(gè)參數設置為true時(shí)可以拖動(dòng)元素，否則不能。
要注意：2D定位只對樣式設置為Position:absolute的元素有效
示例:
<script>
document.execCommand("2D-Position",false,true);
</script>
<div contentEditable=true>
<p style="background-color:silver;position:absolute">可移動(dòng)段落</p>
<input type="button" value="可移動(dòng)按鈕" style="position:absolute">
</div>
2.BackColor 設置或獲取當前選中區的背景顏色
示例:
<script>
function bgcolor()
{
var rng = document.selection.createRange();
rng.execCommand(‘BackColor‘,‘false‘,‘silver‘);
}
</script>
亮少有逸群之才，英霸之器，身長(cháng)八尺，容貌甚偉，時(shí)人異焉。<br>
<input type="button" value="選中部分文本后點(diǎn)擊" onClick="bgcolor()">
3.Bold 切換當前選中區的粗體
這個(gè)方法執行后可以將指定文本設置為Bold，如果在已經(jīng)設置為Bold上再次執行該命令，則可以取消Bold狀態(tài)
示例:
<script>
function setBold()
{
var rng = document.selection.createRange();
rng.execCommand(‘Bold‘);
}
</script>
自董卓造逆以來(lái)，天下豪杰并起。曹操勢不及袁紹，而竟能克紹者，非惟天時(shí)，抑亦人謀也<br>
<input type="button" value="選中部分文本后點(diǎn)擊" onClick="setBold()">
4.Copy 將當前選中區復制到剪貼板
示例:
<script>
function copyText()
{
var rng = document.selection.createRange();
rng.execCommand(‘Copy‘);
alert("當前拷貝的文本是:"+rng.text);
}
</script>
今操已擁百萬(wàn)之眾，挾天子以令諸侯，此誠不可與爭鋒。孫權據有江東，已歷三世，國險而民附，此可用為援而不可圖也<br>
<input type="button" value="拷貝" onClick="copyText()">
5.CreateLink 在當前選中區上插入超級鏈接，并顯示一個(gè)對話(huà)框讓用戶(hù)輸入URL
示例:
<script>
function setLink()
{
var rng = document.selection.createRange();
if(rng.text!="")
{
rng.execCommand(‘CreateLink‘);
if(confirm(‘在新窗口打開(kāi)鏈接嗎?‘))
{
rng.parentElement().outerHTML = rng.parentElement().outerHTML.replace("<A","<A target=‘_blank‘ ");
//這里要注意一定要使用賦值的方式，否則直接調用replace()函數，并不能改變原有值。它們是不同的副本
}
}
}
</script>
荊州北據漢、沔，利盡南海，東連吳會(huì )，西通巴、蜀，此用武之地，非其主不能守；是殆天所以資將軍，將軍豈有意乎？益州險塞，沃野千里，天府之國，高祖因之以成帝業(yè)；今劉璋暗弱，民殷國富，而不知存恤，智能之士，思得明君。
<input type="button" value="創(chuàng )建鏈接" onClick="setLink();">
6.Cut 在當前選中區上執行"剪切"
示例:
<script>
function cutText()
{
var rng = document.selection.createRange();
rng.execCommand(‘Cut‘);
}
</script>
將軍既帝室之胄，信義著(zhù)于四海，總攬英雄，思賢如渴，若跨有荊、益，保其巖阻，西和諸戎，南撫彝、越，外結孫權
，內修政理；待天下有變，則命一上將將荊州之兵以向宛、洛，將軍身率益州之眾以出秦川，百姓有不簞食壺漿以迎將
軍者乎？
<input type="button" value="剪切" onClick="cutText()"><br>
<input>
7.Delete 刪除當前選中區
示例:
<script>
function delText()
{
var rng = document.selection.createRange();
rng.execCommand(‘Delete‘);
}
</script>
誠如是，則大業(yè)可成，漢室可興矣。此亮所以為將軍謀者也。惟將軍圖之
<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>
言罷，命童子取出畫(huà)一軸，掛于中堂，指謂玄德曰：“此西川五十四州之圖也。將軍欲成霸業(yè)，北讓曹操占天時(shí)，南讓孫權占地利，將軍可占人和。
<input type="button" onClick="getFontName()" value="設置字體為幼圓">
9.FontSize 設置或獲取當前選中區的字體大小
這個(gè)命令接受的參數是1-7號字，超過(guò)7的參數也將被轉換成7號字來(lái)處理
示例:
<script>
function setFontSize()
{
var rng = document.selection.createRange();
rng.execCommand(‘FontSize‘,true,‘11‘);
var temp = rng.queryCommandValue(‘FontSize‘);
alert("字體大小是:"+temp);
}
</script>
言罷，命童子取出畫(huà)一軸，掛于中堂，指謂玄德曰：“此西川五十四州之圖也。將軍欲成霸業(yè)，北讓曹操占天時(shí)，南讓孫權占地利，將軍可占人和。
<input type="button" onClick="setFontSize()" value="設置字體大小">
10.ForeColor 設置或獲取選中區的前景(文本)顏色
其實(shí)也可以通過(guò)queryCommandValue()獲得顏色值，不過(guò)格式是10進(jìn)制數，需要的時(shí)候可以轉換成16進(jìn)值
示例:
<script>
function setForeColor()
{
var rng = document.selection.createRange();
rng.execCommand(‘ForeColor‘,true,‘blue‘);
var temp = rng.queryCommandValue(‘ForeColor‘);
alert("顏色值:"+temp);
}
</script>
先取荊州為家，后即取西川建基業(yè)，以成鼎足之勢，然后可圖中原也
<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 增加選中文本的縮進(jìn)
示例:
<script>
function increaseIndent()
{
var rng = document.selection.createRange();
rng.execCommand(‘Indent‘);
}
</script>
<p>自你走后心憔悴</p>
<p>白色油桐風(fēng)中紛飛</p>
<input type="button" onClick="increaseIndent();" value="增加所選文本縮進(jìn)">
13.InsertButton 插入按鈕覆蓋當前選中區
與此相同的還有一個(gè)命令I(lǐng)nsertInputButton，也是插入一個(gè)按鈕，不過(guò)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>
權即見(jiàn)肅，與語(yǔ)甚悅之。眾賓罷退，肅亦辭出，乃獨引肅還，合榻對飲
<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 = "這是一個(gè)隱藏值";
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 = ‘一個(gè)文本框‘;
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>
