| 以前一直不知道好多网站上所说的在线编辑器是怎么回事，后来在文档里发现document 对象的一个方法。 document.execCommand(command, false, value); 才知道具体原理。 一、首先来看一个例子： <DIVcontenteditable="true"style="border:dashed blue 2px">Hello World!</DIV> 保存为html网页，打开看看，在DIV里出现了一个光标，这个DIV就变成可以编辑的了。 类似的，SPAN，FONT等都可以有 contenteditable="true" 这个属性。 再试试下面的： <DIVcontenteditable="true"style="border:dashed blue 2px">Hello World!
<IMGsrc="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 |
|
摘自：http://lijunabc.iteye.com/blog/658539 |
