富文本編輯
- 富文本編輯，又稱為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;
});
好好學習
