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属性
只要把元素设置contenteditable属性就好了(它的属性值有3个，true示意翻开，false示意封闭，inhert示意从父元素那边继续。)：
<div id="test" contenteditable>
<p id="texting">
hello
</p>
</div>
任何元素都能够，以至是button，不过设置以后你会觉得很奇异。
操纵富文本ocument.execCommand()要领
与富文本编辑交互的体式格局，就是运用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()要领等。
