富文本编辑器
方案一：使用iframe
给iframe指定一个非常简单的HTML页面作为其内容来源：
<!-- iframe html -->
<!DOCTYPE html>
<html>
<head>
<title>这里是富文本的iframe页面</title>
</head>
<body>
</body>
</html>
要让它可以编辑，必须要将designMode设置为on。
<!-- main html -->
<iframe name='richedit' style='height:100px;width:100px;' src='iframe.html'>
<script type='text/javascript'>
EventUtils.addHander(window, 'load', function() {
frames['richedit'].document.designMode = 'on';
})
</script>
EventUtil请参考【事件处理程序】这篇博客
方案二：直接使用contenteditable属性（推荐）
把contenteditable给页面中的任何元素，然后用户立即就可以编辑该元素。
这种方法之所以受欢迎，是因为它不需要iframe、空白页和JavaScript,只要为元素设置contenteditable属性即可。
<div id='richedit' class='editable' contenteditable></div>
通过在这个元素上设置contenteditable属性，也能打开或关闭编辑模式。
let div = document.getElementById('richedit');
div.conteneditable = true;
操作富文本
与富文本编辑器交互的主要方式，就是使用document.execCommand()。
这是对选中文本的操作。
它包含三个参数:
- 要执行的命令名称；
- 为了确保跨浏览器的兼容性，第二个参数应该始终设置为false。
因为FireFox会在该参数为true时抛出错误; - 命令对应的值;
- 方案一的实现
// 转换粗体文本
frames['richedit'].document.execCommand('bold', false, null);
// 格式为1级标题
frames['richedit'].document.execCommand('formatblock', false, '<h1>');
- 方案二的实现
document：当前窗口的document对象。
// 转换粗体文本
document.execCommand('bold', false, null);
// 格式为1级标题
document.execCommand('formatblock', false, '<h1>');
注意：虽然所有浏览器都支持这些命令，但这些命令所产生的HTML仍然有很大不同。例如：执行bold命令时，IE和Oprea会使用<strong>标签包围文本，Safari和Chorme使用<b>标签，而Firefox使用<span>标签。
检测命令
-
queryCommandEnabled()
检测是否可以针对当前选择的文本，或者当前插入字符所在位置执行某个命令。
// 检测'bold'命令是否可用 document.queryCommandEnabled('bold'); // true/false -
queryCommandState()
检测当前选择的文本状态。
// 检测'bold'是否已应用到文本上 document.queryCommandEnabled('bold'); // true/false -
queryCommandValue()
检测执行命令传入的值（即execCommand的第三个参数）。
// 检测对选中文本执行'fontsize'命令时，传入的参数，比如是7 document.queryCommandValue('fontsize'); // 7
富文本选区
在富文本编辑器中，使用框架（iframe）的getSelection()方法，可以确定实际选择的文本。
这个方法是window对象和document对象的属性，调用它会返回一个表示当前选择文本的Selection对象Selection 对象属性。
由于可以直接操作选择文本的DOM表现，因此访问DOM范围与使用execCommand()相比，能够对富文本编辑器进行更加细化的控制。
/**为富文本编辑器中被选择的文本添加黄色的背景**/
var selection = frames["richedit"].getSelection();
//取得选择的文本
var selectedText = selection.toString();
//取得代表选区的范围
var range = selection.getRangeAt(0);
//突出显示选择的文本
var span = frames["richedit"].document.createElement("span");
span.style.backgroundColor = "yellow";
range.surroundContents(span);