以前一直不知道好多網站上所說的在線編輯器是怎麼回事，後來在文檔裏發現document 對象的一個方法。
document.execCommand(command, false, value);
才知道具體原理。
一、首先來看一個例子：
<DIV contenteditable="true" style="border:dashed blue 2px">Hello World!</DIV>
保存爲html網頁，打開看看，在DIV裏出現了一個光標，這個DIV就變成可以編輯的了。
類似的，SPAN，FONT等都可以有 contenteditable="true" 這個屬性。
再試試下面的：
<DIV contenteditable="true" style="border:dashed blue 2px">Hello World!
<IMG src="http://p.blog.csdn.net/images/p_blog_csdn_net/comstep/70786/o_logo.jpg" />
</DIV>我們就可以拉伸圖片了。
二、具體實現：
1、需要兩個頁面，blank.html editor.html
2、blank.html 作爲 editor.html的一個內嵌Frame，作爲編輯框。
<html>
<body topmargin="10" leftmargin="10" bgColor="#f6f6f6">
<div id="RTC" contenteditable = true></div>
</body>
</html>
3、editor.html 主要是一些Javascript，用來處理不同的命令。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<SCRIPT LANGUAGE="JavaScript">
<!--
var contentHTML;
function exeCommand(command, value)
{
document.execCommand(command, false, value);
}// 加粗
function Black()
{
var obj = frames['ifRTC'].RTC;
obj.focus();
exeCommand('Bold', '');
}// 斜體
function Italic()
{
var obj = frames['ifRTC'].RTC;
obj.focus();
exeCommand('Italic', '');
}// 下劃線
function UnderLine()
{
var obj = frames['ifRTC'].RTC;
obj.focus();
exeCommand('Underline', '');
}// 向裏縮進
function Indent()
{
var obj = frames['ifRTC'].RTC;
obj.focus();
exeCommand('Indent', '');
}// 向外縮進
function Outdent()
{
var obj = frames['ifRTC'].RTC;
obj.focus();
exeCommand('Outdent', '');
}// 無序列表
function UnorderList()
{
var obj = frames['ifRTC'].RTC;
obj.focus();
exeCommand('InsertUnorderedList', '');
}// 有序列表
function OrderList()
{
var obj = frames['ifRTC'].RTC;
obj.focus();
exeCommand('InsertOrderedList', '');
}// 插入圖片
function Image()
{
var obj = frames['ifRTC'].RTC;
obj.focus();
ImagePath = window.prompt('請輸入圖片路徑：', '');
exeCommand('InsertImage', ImagePath);
}// 預覽效果
function Preview()
{
var htmlContent = frames['ifRTC'].RTC.innerHTML;
var open = window.open('');
open.document.write(htmlContent);
}// 查看編輯框裏的HTML源代碼
function Source()
{
var htmlContent = frames['ifRTC'].RTC.innerHTML;
if (document.all.iframeDiv.style.display == 'block')
{
document.all.iframeDiv.style.display = 'none';
document.all.htmlText.value = htmlContent;
document.all.textDiv.style.display = 'block';
document.all.htmlText.focus();
document.all.Source.value='HTML';
}
else
{
document.all.iframeDiv.style.display = 'block';
document.all.textDiv.style.display = 'none';
frames['ifRTC'].RTC.innerHTML = document.all.htmlText.value;
frames['ifRTC'].RTC.focus();
document.all.Source.value=' 源代碼 ';
}
}// 增加編輯框的高度
function Add()
{
document.all.ifRTC.height = document.all.ifRTC.height*1 + 50;
}
//-->
</SCRIPT>
</HEAD><BODY>
<TABLE width="400"border="0">
<TR>
<TD><input type="button" value="B" name="Black" onclick="Black()" /></TD>
<TD><input type="button" value="I" name="Italic" onclick="Italic()" /></TD>
<TD><input type="button" value="U" name="UnderLine" onclick="UnderLine()" /></TD>
<TD><input type="button" value="UL" name="UnorderList" onclick="UnorderList()" /></TD>
<TD><input type="button" value="OL" name="OrderList" onclick="OrderList()" /></TD>
<TD><input type="button" value="左" name="Outdent" onclick="Outdent()" /></TD>
<TD><input type="button" value="右" name="Indent" onclick="Indent()" /></TD>
<TD><input type="button" value="圖" name="Image" onclick="Image()" /></TD>
</TR>
</TABLE>
<div id="iframeDiv" style="display:block">
<iframe id="ifRTC" width="400" height="200" border="1" src="blank.html" ></iframe>
</div>
<div id="textDiv" style="display:none">
<textarea id="htmlText" cols="50" rows="10"></textarea>
</div>
<br>
<input type="button" value=" + " name="Add" onclick="Add()" />
<input type="button" value=" 預 覽 " name="Preview" onclick="Preview()" />
<input type="button" value=" 源代碼 " name="Source" onclick="Source()" />
</BODY>
</HTML>
三、後記：
這裏寫的只是一個簡單的編輯器，其實重要的就是：
contenteditable="true"
和
document.execCommand(command, false, value);關於 document 的一些方法，可以查看MS的文檔。execCommand 的一些命令也可以在文檔裏找到，下面列出一些：execCommand(command, false, value); 中的 command 可以是以下這些：
BackColor Sets or retrieves the background color of the current selection. Bold Toggles the current selection between bold and nonbold. ClearAutocompleteForForms Clears saved forms data. Copy Copies the current selection to the clipboard. CreateBookmark Retrieves the name of a bookmark anchor or creates a bookmark anchor for the current selection or insertion point. CreateLink Retrieves the URL of a hyperlink or creates a hyperlink on the current selection. Cut Copies the current selection to the clipboard and then deletes it. Delete Deletes the current selection. FontName Sets or retrieves the font for the current selection. FontSize Sets or retrieves the font size for the current selection. ForeColor Sets or retrieves the foreground (text) color of the current selection. FormatBlock Sets or retrieves the current block format tag. Indent Increases the indent of the selected text by one indentation increment. InsertButton Overwrites a button control on the current selection. InsertFieldset Overwrites a box on the current selection. InsertHorizontalRule Overwrites a horizontal line on the current selection. InsertIFrame Overwrites an inline frame on the current selection. InsertImage Overwrites an image on the current selection. InsertInputButton Overwrites a button control on the current selection. InsertInputCheckbox Overwrites a check box control on the current selection. InsertInputFileUpload Overwrites a file upload control on the current selection. InsertInputHidden Inserts a hidden control on the current selection. InsertInputImage Overwrites an image control on the current selection. InsertInputPassword Overwrites a password control on the current selection. InsertInputRadio Overwrites a radio control on the current selection. InsertInputReset Overwrites a reset control on the current selection. InsertInputSubmit Overwrites a submit control on the current selection. InsertInputText Overwrites a text control on the current selection. InsertMarquee Overwrites an empty marquee on the current selection. InsertOrderedList Toggles the current selection between an ordered list and a normal format block. InsertParagraph Overwrites a line break on the current selection. InsertSelectDropdown Overwrites a drop-down selection control on the current selection. InsertSelectListbox Overwrites a list box selection control on the current selection. InsertTextArea Overwrites a multiline text input control on the current selection. InsertUnorderedList Toggles the current selection between an ordered list and a normal format block. Italic Toggles the current selection between italic and nonitalic. JustifyCenter Centers the format block in which the current selection is located. JustifyLeft Left-justifies the format block in which the current selection is located. JustifyRight Right-justifies the format block in which the current selection is located. Outdent Decreases by one increment the indentation of the format block in which the current selection is located. OverWrite Toggles the text-entry mode between insert and overwrite. Paste Overwrites the contents of the clipboard on the current selection. Refresh Refreshes the current document. RemoveFormat Removes the formatting tags from the current selection. SelectAll Selects the entire document. SaveAs Saves the current Web page to a file. UnBookmark Removes any bookmark from the current selection. Underline Toggles the current selection between underlined and not underlined. Unlink Removes any hyperlink from the current selection. Unselect Clears the current selection.