表单（五）富文本编辑

富文本编辑的本质：在页面中嵌入一个包含空HTML页面的iframe，通过设置designMode属性为on，该空白HTML页面可以被编辑。

---

【创建富文本编辑区域】

方法一: 在页面完全加载后将designMode属性设置为on

EventUnit.addHandler(window, "load", function(){                frames[iframeId].document.designMode = "on";                });

方法二： 将任意元素设置contenteditable，就可编辑该元素。不需要iframe和空白页

<div class="editarea" id="richeditdiv" style="height:100px;width:100px;" contenteditable></div>

contenteditable有三个值：“true” 打开，“false”关闭，“inherit”继承父元素

---

【操作富文本】

1.执行某个命令：
document.execCommand(参数1，参数2，参数3)

参数1：命令名，参数2：浏览器是否为该命令提供用户界面（一般为false），参数3：该命令需要的值（若不需要则为null）

2.检测在编辑区域的当前位置或当前选择的文本上是否可以执行某个命令：
document.queryCommandEnabled(命令名)

3.确定是否已将命令执行到选择的文本上：
document.queryCommandState(命令名)

4.获得执行命令时传入的第三个参数：
document.queryCommandValue(命令名)

##在不同浏览器上，富文本编辑器会产生不一样的HTML，例如：    执行bold命令时，IE和opera会使用<strong>标签包围文本，firefox会使用<span>

---

【富文本选区】

1.使用 iframe 的 getSelection()方法，返回一个selection对象，可以确定实际选择的文本。    frames["richedit"].getSelection();2.IE支持的是document的selection属性      frames["richedit"].document.selection;

selection对象利用DOM范围来管理富文本选区。

selection对象的方法：

1. addRange（范围）             将指定的范围添加到选区中2. collapse（指定节点，偏移位置）  将选区折叠到指定节点中相应的偏移位置3. collapseToEnd()             将选区折叠到终点4. collapseToStart()           将选区折叠到起点5. containsNode(指定的节点)      确定指定节点是否包含在选区中6. deleteFromDocument()        从文档中删除选区中的文本，效果等同document.execCommand("delete",false,null)7. extend(指定节点，偏移位置)                                      8. getRangeAt(索引)             返回对应索引选区中的DOM范围9. removeAllRanges()           从选区中移除所有DOM范围，相当于整个选区都移除掉了10. removeRange(范围)           从选区中移除指定的范围11. selectAllChildren(指定节点)  清除选区，并选择指定节点的所有子节点12. toString()                  返回选区包含的文本内容

例子：为选区添加黄色背景

var selection = frames["richedit"].getSelection();var selectedText = selection.toString();  //取得选区文本var range = selection.getRangeAt(？);  //取得选区范围var span = frames["richedit"].document.createElement("span");span.style.backgroundColor = "yellow";range.surroundContents(span);     //给选取添加黄色背景

由于IE8及更早版本不支持DOM范围,只支持文本范围，上面的例子用IE的文本范围来实现：

var selection = frames["richedit"].document.selection;var range = selection.createRange(); //创建文本范围range.pasteHTML("<span style=\"background-color:yellow\">"+range.htmlText+"</span>");

---

【提交富文本】

方法一：从iframe中提取HTML，将其插入到隐藏的表单字段中。

var hidddernForm = document.getElementById("hiddenformID"); //隐藏表单        EventUnit.addHandler(hidddernForm,"submit",function(event){            event = EventUnit.getEvent(event);            var target = EventUnit.getTarget(event);            target.elements["字段名"].value = frames["richedit"].document.body.innerHTML;        });

方法二：对于contenteditable的元素

var hidddernForm = document.getElementById("hiddenform");        EventUnit.addHandler(hidddernForm,"submit",function(event){            event = EventUnit.getEvent(event);            var target = EventUnit.getTarget(event);            target.elements["字段名"].value = document.getElementById("元素ID").innerHTML;        });