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>
我们就可以拉伸图片了。
<html>
<body topmargin="10" leftmargin="10" bgColor="#f6f6f6">
<div id="RTC" contenteditable = true></div>
</body>
</html>
<!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. |