富文本編輯

• 富文本編輯，又稱為WYSIWYG（What You See Is What You Get，所見即所得）

1、使用contenteditable屬性

• 一種編輯富文本內(nèi)容的方式是使用名為contenteditable的特殊屬性?？梢园裞ontenteditable 屬性應用給頁面中的任何元素，然后用戶立即就可以編輯該元素。
• 它不需要iframe、空白頁和JavaScript，只要為元素設(shè)置contenteditable 屬性即可。

<div class="editable" id="richedit" contenteditable></div>

• contenteditable 屬性有三個可能的值："true"表示打開、"false"表示關(guān)閉，"inherit"表示從父元素那里繼承。

var div = document.getElementById("richedit");
div.contentEditable = "true";

2、操作富文本

• 與富文本編輯器交互的主要方式，就是使用document.execCommand()。這個方法可以對文檔執(zhí)行預定義的命令，而且可以應用大多數(shù)格式。
• 可以為document.execCommand()方法傳遞3個參數(shù)：要執(zhí)行的命令名稱、表示瀏覽器是否應該為當前命令提供用戶界面的一個布爾值（始終設(shè)置為false）和執(zhí)行命令必須的一個值（如果不需要值，則傳遞null）。
• 可以在任何時候使用這些命令來修改富文本區(qū)域的外觀。

//轉(zhuǎn)換粗體文本
frames["richedit"].document.execCommand("bold", false, null);

//轉(zhuǎn)換斜體文本
frames["richedit"].document.execCommand("italic", false, null);

//創(chuàng)建指向www.wrox.com 的鏈接
frames["richedit"].document.execCommand("createlink", false,
"http://www.wrox.com");

//格式化為1 級標題
frames["richedit"].document.execCommand("formatblock", false, "<h1>");

• 同樣的方法也適用于頁面中contenteditable屬性為"true"的區(qū)塊，只要把對框架的引用替換成當前窗口的document 對象即可。

//轉(zhuǎn)換粗體文本
document.execCommand("bold", false, null);
//轉(zhuǎn)換斜體文本
document.execCommand("italic", false, null);
//創(chuàng)建指向www.wrox.com 的鏈接
document.execCommand("createlink", false,
"http://www.wrox.com");
//格式化為1 級標題
document.execCommand("formatblock", false, "<h1>");

• 除了命令之外，還有一些與命令相關(guān)的方法。

(1)queryCommandEnabled()

• queryCommandEnabled()，可以用它來檢測是否可以針對當前選擇的文本，或者當前插入字符所在位置執(zhí)行某個命令。
• 這個方法接收一個參數(shù)，即要檢測的命令。如果當前編輯區(qū)域允許執(zhí)行傳入的命令，這個方法返回true，否則返回false。

var result = frames["richedit"].document.queryCommandEnabled("bold");

(2)queryCommandState()

• queryCommandState()方法用于確定是否已將指定命令應用到了選擇的文本。

var isBold = frames["richedit"].document.queryCommandState("bold");

(3)queryCommandValue()

• queryCommandValue()，用于取得執(zhí)行命令時傳入的值

var fontSize = frames["richedit"].document.queryCommandValue("fontsize");

3、富文本選區(qū)

• 在富文本編輯器中，使用框架（iframe）的getSelection()方法，可以確定實際選擇的文本。
• 這個方法是window 對象和document對象的屬性，調(diào)用它會返回一個表示當前選擇文本的Selection對象Selection 對象屬性

/**為富文本編輯器中被選擇的文本添加黃色的背景**/
var selection = frames["richedit"].getSelection();
//取得選擇的文本
var selectedText = selection.toString();
//取得代表選區(qū)的范圍
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元素，也可以執(zhí)行類似操作。

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

好好學習