【javascript】富文本编辑

富文本编辑

• 富文本编辑，又称为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;
});

好好学习