摘要：操作富文本方法與富文本編輯交互的方式，就是使用。將當(dāng)前選中區(qū)復(fù)制到剪貼板并刪除之。增加選中文本的縮進(jìn)。富文本選區(qū)在富文本編輯器中，使用框架的方法，可以確定實(shí)際選擇的文本。這個(gè)方法是對(duì)象和對(duì)象的屬性，調(diào)用它返回一個(gè)表示當(dāng)前選擇文本的對(duì)象。

富文本測(cè)試

BX9054: 各瀏覽器對(duì) document.execCommand 方法的首參數(shù)可選值范圍存在差異

部分內(nèi)容來(lái)自w3c help：http://w3help.org/zh-cn/kb/
w3cHelp

在頁(yè)面中嵌入一個(gè)包含空的HTML頁(yè)面的iframe。通過(guò)設(shè)置designMode屬性，這個(gè)空白的HTML頁(yè)面就可以被編輯，編輯對(duì)象就是body元素的HTML代碼。designMode屬性有兩個(gè)可能的值：on和off（默認(rèn)值）。

window.addEventListener("load", function () {
    frames["firstFrame"].document.designMode = "on"; //這里返回錯(cuò)誤信息"Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match."是因?yàn)榄h(huán)境的問(wèn)題，protocols為file，放在瀏覽器上就沒(méi)有問(wèn)題了。
});

只要把元素設(shè)置contenteditable屬性就行了(它的屬性值有3個(gè)，true表示打開(kāi)，false表示關(guān)閉，inhert表示從父元素那里繼承。)：

    

        hello
    

任何元素都可以，甚至是button，不過(guò)設(shè)置之后你會(huì)覺(jué)得很怪異。

與富文本編輯交互的方式，就是使用document.execCommand()。這個(gè)方法可以對(duì)文檔執(zhí)行預(yù)定義的命令，而且可以應(yīng)用大多數(shù)格式。

可以為document.execCommand()方法傳遞3個(gè)參數(shù)：要執(zhí)行的命令名稱(chēng)，表示瀏覽器是否應(yīng)該為當(dāng)前命令提供用戶(hù)界面的一個(gè)布爾值和執(zhí)行命令必須的一個(gè)值（不需要值，可設(shè)為null）。為了保證瀏覽器兼容，需要設(shè)置第二個(gè)參數(shù)為false。

另外在各瀏覽器對(duì)應(yīng)的開(kāi)發(fā)者站點(diǎn) msdn.microsoft.com (MSDN)、developer.mozilla.org (Mozilla Developer Network)、developer.apple.com (Apple Developer)、dev.opera.com (Opera Developer Community) 中，MSDN 與 Mozilla Developer Network 均有詳細(xì)的 execCommand 方法的首參數(shù)可選值描述，Opera Developer Community 有簡(jiǎn)要說(shuō)明， Apple Developer 無(wú)任何可查資料。

不同瀏覽器支持的預(yù)定義命令不一樣，下標(biāo)是被支持最多的命令（加粗的）：

2D-Position 允許通過(guò)拖曳移動(dòng)絕對(duì)定位的對(duì)象。

AbsolutePosition 設(shè)定元素的 position 屬性為“absolute”(絕對(duì))。

BackColor 設(shè)置或獲取當(dāng)前選中區(qū)的背景顏色。

BlockDirLTR 目前尚未支持。

BlockDirRTL 目前尚未支持。

Bold 切換當(dāng)前選中區(qū)的粗體顯示與否。

BrowseMode 目前尚未支持。

Copy 將當(dāng)前選中區(qū)復(fù)制到剪貼板。

CreateBookmark 創(chuàng)建一個(gè)書(shū)簽錨或獲取當(dāng)前選中區(qū)或插入點(diǎn)的書(shū)簽錨的名稱(chēng)。

CreateLink 在當(dāng)前選中區(qū)上插入超級(jí)鏈接，或顯示一個(gè)對(duì)話框允許用戶(hù)指定要為當(dāng)前選中區(qū)插入的超級(jí)鏈接的 URL。

Cut 將當(dāng)前選中區(qū)復(fù)制到剪貼板并刪除之。

Delete 刪除當(dāng)前選中區(qū)。

DirLTR 目前尚未支持。

DirRTL 目前尚未支持。

EditMode 目前尚未支持。

FontName 設(shè)置或獲取當(dāng)前選中區(qū)的字體。

FontSize 設(shè)置或獲取當(dāng)前選中區(qū)的字體大小。

ForeColor 設(shè)置或獲取當(dāng)前選中區(qū)的前景(文本)顏色。

FormatBlock 設(shè)置當(dāng)前塊格式化標(biāo)簽。

Indent 增加選中文本的縮進(jìn)。

InlineDirLTR 目前尚未支持。

InlineDirRTL 目前尚未支持。

InsertButton 用按鈕控件覆蓋當(dāng)前選中區(qū)。

InsertFieldset 用方框覆蓋當(dāng)前選中區(qū)。

InsertHorizontalRule 用水平線覆蓋當(dāng)前選中區(qū)。

InsertIFrame 用內(nèi)嵌框架覆蓋當(dāng)前選中區(qū)。

InsertImage 用圖像覆蓋當(dāng)前選中區(qū)。

InsertInputButton 用按鈕控件覆蓋當(dāng)前選中區(qū)。

InsertInputCheckbox 用復(fù)選框控件覆蓋當(dāng)前選中區(qū)。

InsertInputFileUpload 用文件上載控件覆蓋當(dāng)前選中區(qū)。

InsertInputHidden 插入隱藏控件覆蓋當(dāng)前選中區(qū)。

InsertInputImage 用圖像控件覆蓋當(dāng)前選中區(qū)。

InsertInputPassword 用密碼控件覆蓋當(dāng)前選中區(qū)。

InsertInputRadio 用單選鈕控件覆蓋當(dāng)前選中區(qū)。

InsertInputReset 用重置控件覆蓋當(dāng)前選中區(qū)。

InsertInputSubmit 用提交控件覆蓋當(dāng)前選中區(qū)。

InsertInputText 用文本控件覆蓋當(dāng)前選中區(qū)。

InsertMarquee 用空字幕覆蓋當(dāng)前選中區(qū)。

InsertOrderedList 切換當(dāng)前選中區(qū)是編號(hào)列表還是常規(guī)格式化塊。

InsertParagraph 用換行覆蓋當(dāng)前選中區(qū)。

InsertSelectDropdown 用下拉框控件覆蓋當(dāng)前選中區(qū)。

InsertSelectListbox 用列表框控件覆蓋當(dāng)前選中區(qū)。

InsertTextArea 用多行文本輸入控件覆蓋當(dāng)前選中區(qū)。

InsertUnorderedList 切換當(dāng)前選中區(qū)是項(xiàng)目符號(hào)列表還是常規(guī)格式化塊。

Italic 切換當(dāng)前選中區(qū)斜體顯示與否。

JustifyCenter 將當(dāng)前選中區(qū)在所在格式化塊置中。

JustifyFull 目前尚未支持。

JustifyLeft 將當(dāng)前選中區(qū)所在格式化塊左對(duì)齊。

JustifyNone 目前尚未支持。

JustifyRight 將當(dāng)前選中區(qū)所在格式化塊右對(duì)齊。

LiveResize 迫使 MSHTML 編輯器在縮放或移動(dòng)過(guò)程中持續(xù)更新元素外觀，而不是只在移動(dòng)或縮放完成后更新。

MultipleSelection 允許當(dāng)用戶(hù)按住 Shift 或 Ctrl 鍵時(shí)一次選中多于一個(gè)站點(diǎn)可選元素。

Open 目前尚未支持。

Outdent 減少選中區(qū)所在格式化塊的縮進(jìn)。

OverWrite 切換文本狀態(tài)的插入和覆蓋。

Paste 用剪貼板內(nèi)容覆蓋當(dāng)前選中區(qū)。

PlayImage 目前尚未支持。

Print 打開(kāi)打印對(duì)話框以便用戶(hù)可以打印當(dāng)前頁(yè)。

Redo 目前尚未支持。

Refresh 刷新當(dāng)前文檔。

RemoveFormat 從當(dāng)前選中區(qū)中刪除格式化標(biāo)簽。

RemoveParaFormat 目前尚未支持。

SaveAs 將當(dāng)前 Web 頁(yè)面保存為文件。

SelectAll 選中整個(gè)文檔。

SizeToControl 目前尚未支持。

SizeToControlHeight 目前尚未支持。

SizeToControlWidth 目前尚未支持。

Stop 目前尚未支持。

StopImage 目前尚未支持。

StrikeThrough 目前尚未支持。

Subscript 目前尚未支持。

Superscript 目前尚未支持。

UnBookmark 從當(dāng)前選中區(qū)中刪除全部書(shū)簽。

Underline 切換當(dāng)前選中區(qū)的下劃線顯示與否。

Undo 目前尚未支持。

Unlink 從當(dāng)前選中區(qū)中刪除全部超級(jí)鏈接。

Unselect 清除當(dāng)前選中區(qū)的選中狀態(tài)。

可以在任何時(shí)候使用這些命令來(lái)修改富文本區(qū)域的外觀：

frames["framing"].document.execCommand("bold", false, null);

同樣也使用于頁(yè)面中contenteditable屬性為“true”的區(qū)塊，只要把框架的引用替換成當(dāng)前窗口的document對(duì)象就可以了：

p.addEventListener("contextmenu", function () {
    event.preventDefault();
    document.execCommand("backcolor", false, "red");
});

上述代碼當(dāng)點(diǎn)擊右鍵會(huì)將p元素的backgroundColor顏色變?yōu)閞ed（在chrome上，這則代碼會(huì)在p元素周?chē)由蟬pan代碼并附上style屬性）；

除了命令之外，還有一些與命令相關(guān)的方法。

第一個(gè)方法是queryCommandEnabled(),可以檢驗(yàn)是否可以針對(duì)當(dāng)前選擇的文本或者當(dāng)前插入字符處所在的位置執(zhí)行相應(yīng)的命令。這個(gè)方法接收一個(gè)參數(shù)：即要檢測(cè)的命令。如果允許返回true。但并不意味著可以執(zhí)行命令，只是該命令對(duì)當(dāng)前文本可以或不可以執(zhí)行。

console.log(document.queryCommandSupported("bold"));

第二個(gè)方法是queryCommandState()方法用來(lái)確定是否已將指定的命令應(yīng)用到了選擇的文本。

第三個(gè)方法是queryCommandValue()方法用于取得執(zhí)行命令時(shí)傳入的值。

在富文本編輯器中，使用框架（iframe）的getSelection()方法，可以確定實(shí)際選擇的文本。這個(gè)方法是window對(duì)象和document對(duì)象的屬性，調(diào)用它返回一個(gè)表示當(dāng)前選擇文本的selection對(duì)象。

每個(gè)Selection對(duì)象都有下面的屬性：

anchorNode: 選區(qū)起點(diǎn)所在的節(jié)點(diǎn)

anchorOffset: 到達(dá)選區(qū)起點(diǎn)位置之前跳過(guò)的anchorNode中的字符數(shù)量

focusNode: 選區(qū)終點(diǎn)所在的節(jié)點(diǎn)

focusOffset: focusNode中包含在選區(qū)之內(nèi)的字符數(shù)量

isCollapsed: 起點(diǎn)終點(diǎn)是否重合

rangeCount: 包含DOM范圍的數(shù)量

type:

baseNode:

baseOffset:

extentNode:

extentOffset:

以及方法：

getRangeAt（index）: 返回索引對(duì)應(yīng)的選區(qū)中的DOM范圍

addRange（range）: 將指定的DOM范圍添加到選區(qū)中

removeAllRanges: 移除所有DOM范圍

removeRange（range）: 從選區(qū)中移除指定的DOM范圍

collapse（node, offset）: 將選區(qū)折疊到指定節(jié)點(diǎn)中的相應(yīng)的文本偏移位置

collapseToStart: 折疊到起點(diǎn)

collapseToEnd: 折疊到終點(diǎn)

extend（node,offset）: 通過(guò)將focusNode和focusOffset移動(dòng)到指定的值來(lái)擴(kuò)展選區(qū)

selectAllChildren（node）: 清除選區(qū)并選擇指定節(jié)點(diǎn)的所有子節(jié)點(diǎn)

deleteFromDocument: 從文檔中刪除選區(qū)中的文本與document.execCommand("delete",false,null)相同

containsNode（node）: 確定指定的節(jié)點(diǎn)是否包含在選區(qū)中

toString(): 返回選區(qū)所包含的文本內(nèi)容

empty:

setPosition:

setBaseAndExtent:

modify:

toString:

constructor:

如，獲取選擇的文本：

var selection = document.getSelection();
console.log(selection.toString());

又如當(dāng)用戶(hù)選擇文本后右鍵改變目標(biāo)style：

p.addEventListener("contextmenu", function() {
    event.preventDefault();
    document.execCommand("copy","");
    //selection富文本選區(qū)
    var selection = document.getSelection();
    //獲取選擇的文本
    var selectedText = selection.toString();
    // 取得代表選區(qū)的范圍
    var range = selection.getRangeAt(0);
    //新建一個(gè)span設(shè)置style的背景顏色為黃色
    var span = document.createElement("span");
    span.style.backgroundColor = "yellow";
    range.surroundContents(span);
});

部分舊版瀏覽器需要使用window.getSelection()或document.getSelection()；
IE則需要使用它瀏覽器本身的text屬性等。也可以使用htmlText屬性和pasteHTML()方法等。