富文本编辑
- 富文本编辑，又称为WYSIWYG（What You See Is What You Get，所见即所得）
1、使用contenteditable属性
- 一种编辑富文本内容的方式是使用名为contenteditable的特殊属性。可以把contenteditable 属性应用给页面中的任何元素，然后用户立即就可以编辑该元素。
- 它不需要iframe、空白页和JavaScript，只要为元素设置contenteditable 属性即可。
<div class="editable" id="richedit" contenteditable></div>
- contenteditable 属性有三个可能的值："true"表示打开、"false"表示关闭，"inherit"表示从父元素那里继承。
var div = document.getElementById("richedit");
div.contentEditable = "true";
2、操作富文本
- 与富文本编辑器交互的主要方式，就是使用document.execCommand()。这个方法可以对文档执行预定义的命令，而且可以应用大多数格式。
- 可以为document.execCommand()方法传递3个参数：要执行的命令名称、表示浏览器是否应该为当前命令提供用户界面的一个布尔值（始终设置为false）和执行命令必须的一个值（如果不需要值，则传递null）。
- 可以在任何时候使用这些命令来修改富文本区域的外观。
//转换粗体文本
frames["richedit"].document.execCommand("bold", false, null);
//转换斜体文本
frames["richedit"].document.execCommand("italic", false, null);
//创建指向www.wrox.com 的链接
frames["richedit"].document.execCommand("createlink", false,
"http://www.wrox.com");
//格式化为1 级标题
frames["richedit"].document.execCommand("formatblock", false, "<h1>");
- 同样的方法也适用于页面中contenteditable属性为"true"的区块，只要把对框架的引用替换成当前窗口的document 对象即可。
//转换粗体文本
document.execCommand("bold", false, null);
//转换斜体文本
document.execCommand("italic", false, null);
//创建指向www.wrox.com 的链接
document.execCommand("createlink", false,
"http://www.wrox.com");
//格式化为1 级标题
document.execCommand("formatblock", false, "<h1>");
- 除了命令之外，还有一些与命令相关的方法。
(1)queryCommandEnabled()
- queryCommandEnabled()，可以用它来检测是否可以针对当前选择的文本，或者当前插入字符所在位置执行某个命令。
- 这个方法接收一个参数，即要检测的命令。如果当前编辑区域允许执行传入的命令，这个方法返回true，否则返回false。
var result = frames["richedit"].document.queryCommandEnabled("bold");
(2)queryCommandState()
- queryCommandState()方法用于确定是否已将指定命令应用到了选择的文本。
var isBold = frames["richedit"].document.queryCommandState("bold");
(3)queryCommandValue()
- queryCommandValue()，用于取得执行命令时传入的值
var fontSize = frames["richedit"].document.queryCommandValue("fontsize");
3、富文本选区
- 在富文本编辑器中，使用框架（iframe）的getSelection()方法，可以确定实际选择的文本。
- 这个方法是window 对象和document对象的属性，调用它会返回一个表示当前选择文本的Selection对象Selection 对象属性
/**为富文本编辑器中被选择的文本添加黄色的背景**/
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);
4、表单与富文本
- 富文本编辑器中的HTML 不会被自动提交给服务器，而需要我们手工来提取并提交HTML。
- 为此，通常可以添加一个隐藏的表单字段，让它的值等于从iframe 中提取出的HTML。
- 具体来说，就是在提交表单之前，从iframe中提取出HTML，并将其插入到隐藏的字段中。
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;
});
好好学习
