《JavaScript高级程序设计》读书笔记14.5富文本编辑

本质是，在页面中嵌入一个包含空 HTML页面的 iframe。

`<iframe>`方法：

先给iframe指定一个非常简单的HTML页面作为其内容来源。

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Blank Page for Rich Text Editing</title> 
    </head> 
    <body> 
    </body> 
</html>

让它可以编辑，必须要将 designMode 设置为”on”，但只有在页面完全加载之后才能设置这个属性。代码如下

<iframe name="richedit" style="height:100px;width:100px;" src="blank.htm"></iframe>
 
<script type="text/javascript"> 
EventUtil.addHandler(window, "load", function(){ 
    frames["richedit"].document.designMode = "on"; 
}); 
</script>

1. 使用contenteditable属性

把contenteditable属性应用给页面中的任何元素，然后用户立即就可以编辑该元素。
contenteditable属性有三个可能的值：
- “true”表示打开;
- “false”表示关闭;
- “inherit”表示从父元素那里继承（因为可以在contenteditable元素中创建或删除元素）。

2. 操作富文本

与富文本编辑器交互的主要方式，就是使用 document.execCommand()。
document.execCommand()方法传递 3个参数：
- 要执行的命令名称;
- 表示浏览器是否应该为当前命令提供用户界面的一个布尔值（一般false）;
- 执行命令必须的一个值（如果不需要值，则传递 null）;

详细列表见书P443

queryCommandEnabled() 方法：
- 可以用它来检测是否可以针对当前选择的文本，或者当前插入字符所在位置执行某个命令。
- 接收一个参数，即要检测的命令。如果当前编辑区域允许执行传入的命令，这个方法返回true，否则返回false。
- 用于确定是否已将指定命令应用到了选择的文本。
queryCommandValue() 方法：
- 用于取得执行命令时传入的值（即前面例子中传给document.execCommand()的第三个参数）
- 可以确定某个命令是怎样应用到选择的文本的，可以据以确定再对其应用后续命令是
  否合适。

3. 富文本选区

框架（iframe）的getSelection()方法，可以确定实际选择的文本，调用它会返回一个表示当前选择文本的Selection对象。

4. 表单与富文本

富文本编辑器中的 HTML 不会被自动提交给服务器，而需要我们手工来提取并提交HTML。
原理：在提交表单之前，从 iframe 中提取出 HTML，并将其插入到隐藏的字段中。

下面就是通过表单的onsubmit事件处理程序实现上述操作的代码：

<iframe>模式
EventUtil.addHandler(form, "submit", function(event){ 
    event = EventUtil.getEvent(event); 
    var target = EventUtil.getTarget(event); 
 
    target.elements["comments"].value = frames["richedit"].document.body.innerHTML;
}); 

contenteditable属性模式
EventUtil.addHandler(form, "submit", function(event){ 
    event = EventUtil.getEvent(event); 
    var target = EventUtil.getTarget(event); 
   
    target.elements["comments"].value = 
        document.getElementById("richedit").innerHTML; 
});

<iframe>方法：

1. 使用contenteditable属性

2. 操作富文本

3. 富文本选区

4. 表单与富文本

`<iframe>`方法：