摘要：操作富文本方法與富文本編輯交互的方式，就是使用。將當前選中區復制到剪貼板并刪除之。增加選中文本的縮進。富文本選區在富文本編輯器中，使用框架的方法，可以確定實際選擇的文本。這個方法是對象和對象的屬性，調用它返回一個表示當前選擇文本的對象。

富文本測試

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

部分內容來自w3c help：http://w3help.org/zh-cn/kb/
w3cHelp

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

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

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

    

        hello
    

任何元素都可以，甚至是button，不過設置之后你會覺得很怪異。

與富文本編輯交互的方式，就是使用document.execCommand()。這個方法可以對文檔執行預定義的命令，而且可以應用大多數格式。

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

另外在各瀏覽器對應的開發者站點 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 均有詳細的 execCommand 方法的首參數可選值描述，Opera Developer Community 有簡要說明， Apple Developer 無任何可查資料。

不同瀏覽器支持的預定義命令不一樣，下標是被支持最多的命令（加粗的）：

2D-Position 允許通過拖曳移動絕對定位的對象。

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

BackColor 設置或獲取當前選中區的背景顏色。

BlockDirLTR 目前尚未支持。

BlockDirRTL 目前尚未支持。

Bold 切換當前選中區的粗體顯示與否。

BrowseMode 目前尚未支持。

Copy 將當前選中區復制到剪貼板。

CreateBookmark 創建一個書簽錨或獲取當前選中區或插入點的書簽錨的名稱。

CreateLink 在當前選中區上插入超級鏈接，或顯示一個對話框允許用戶指定要為當前選中區插入的超級鏈接的 URL。

Cut 將當前選中區復制到剪貼板并刪除之。

Delete 刪除當前選中區。

DirLTR 目前尚未支持。

DirRTL 目前尚未支持。

EditMode 目前尚未支持。

FontName 設置或獲取當前選中區的字體。

FontSize 設置或獲取當前選中區的字體大小。

ForeColor 設置或獲取當前選中區的前景(文本)顏色。

FormatBlock 設置當前塊格式化標簽。

Indent 增加選中文本的縮進。

InlineDirLTR 目前尚未支持。

InlineDirRTL 目前尚未支持。

InsertButton 用按鈕控件覆蓋當前選中區。

InsertFieldset 用方框覆蓋當前選中區。

InsertHorizontalRule 用水平線覆蓋當前選中區。

InsertIFrame 用內嵌框架覆蓋當前選中區。

InsertImage 用圖像覆蓋當前選中區。

InsertInputButton 用按鈕控件覆蓋當前選中區。

InsertInputCheckbox 用復選框控件覆蓋當前選中區。

InsertInputFileUpload 用文件上載控件覆蓋當前選中區。

InsertInputHidden 插入隱藏控件覆蓋當前選中區。

InsertInputImage 用圖像控件覆蓋當前選中區。

InsertInputPassword 用密碼控件覆蓋當前選中區。

InsertInputRadio 用單選鈕控件覆蓋當前選中區。

InsertInputReset 用重置控件覆蓋當前選中區。

InsertInputSubmit 用提交控件覆蓋當前選中區。

InsertInputText 用文本控件覆蓋當前選中區。

InsertMarquee 用空字幕覆蓋當前選中區。

InsertOrderedList 切換當前選中區是編號列表還是常規格式化塊。

InsertParagraph 用換行覆蓋當前選中區。

InsertSelectDropdown 用下拉框控件覆蓋當前選中區。

InsertSelectListbox 用列表框控件覆蓋當前選中區。

InsertTextArea 用多行文本輸入控件覆蓋當前選中區。

InsertUnorderedList 切換當前選中區是項目符號列表還是常規格式化塊。

Italic 切換當前選中區斜體顯示與否。

JustifyCenter 將當前選中區在所在格式化塊置中。

JustifyFull 目前尚未支持。

JustifyLeft 將當前選中區所在格式化塊左對齊。

JustifyNone 目前尚未支持。

JustifyRight 將當前選中區所在格式化塊右對齊。

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

MultipleSelection 允許當用戶按住 Shift 或 Ctrl 鍵時一次選中多于一個站點可選元素。

Open 目前尚未支持。

Outdent 減少選中區所在格式化塊的縮進。

OverWrite 切換文本狀態的插入和覆蓋。

Paste 用剪貼板內容覆蓋當前選中區。

PlayImage 目前尚未支持。

Print 打開打印對話框以便用戶可以打印當前頁。

Redo 目前尚未支持。

Refresh 刷新當前文檔。

RemoveFormat 從當前選中區中刪除格式化標簽。

RemoveParaFormat 目前尚未支持。

SaveAs 將當前 Web 頁面保存為文件。

SelectAll 選中整個文檔。

SizeToControl 目前尚未支持。

SizeToControlHeight 目前尚未支持。

SizeToControlWidth 目前尚未支持。

Stop 目前尚未支持。

StopImage 目前尚未支持。

StrikeThrough 目前尚未支持。

Subscript 目前尚未支持。

Superscript 目前尚未支持。

UnBookmark 從當前選中區中刪除全部書簽。

Underline 切換當前選中區的下劃線顯示與否。

Undo 目前尚未支持。

Unlink 從當前選中區中刪除全部超級鏈接。

Unselect 清除當前選中區的選中狀態。

可以在任何時候使用這些命令來修改富文本區域的外觀：

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

同樣也使用于頁面中contenteditable屬性為“true”的區塊，只要把框架的引用替換成當前窗口的document對象就可以了：

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

上述代碼當點擊右鍵會將p元素的backgroundColor顏色變為red（在chrome上，這則代碼會在p元素周圍加上span代碼并附上style屬性）；

除了命令之外，還有一些與命令相關的方法。

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

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

第二個方法是queryCommandState()方法用來確定是否已將指定的命令應用到了選擇的文本。

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

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

每個Selection對象都有下面的屬性：

anchorNode: 選區起點所在的節點

anchorOffset: 到達選區起點位置之前跳過的anchorNode中的字符數量

focusNode: 選區終點所在的節點

focusOffset: focusNode中包含在選區之內的字符數量

isCollapsed: 起點終點是否重合

rangeCount: 包含DOM范圍的數量

type:

baseNode:

baseOffset:

extentNode:

extentOffset:

以及方法：

getRangeAt（index）: 返回索引對應的選區中的DOM范圍

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

removeAllRanges: 移除所有DOM范圍

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

collapse（node, offset）: 將選區折疊到指定節點中的相應的文本偏移位置

collapseToStart: 折疊到起點

collapseToEnd: 折疊到終點

extend（node,offset）: 通過將focusNode和focusOffset移動到指定的值來擴展選區

selectAllChildren（node）: 清除選區并選擇指定節點的所有子節點

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

containsNode（node）: 確定指定的節點是否包含在選區中

toString(): 返回選區所包含的文本內容

empty:

setPosition:

setBaseAndExtent:

modify:

toString:

constructor:

如，獲取選擇的文本：

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

又如當用戶選擇文本后右鍵改變目標style：

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

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