IE 5.5 的内置编辑器（在MSDN ONLINE翻出来的资料）
来源：岁月联盟
时间：2003-07-11
<HTML>
<HEAD>
<TITLE>Editable Regions Sample</TITLE>
<STYLE>
BODY{margin:0;
background:white;
font-family:verdana;
font-size:80%;}
BUTTON {cursor:hand;
background:#ffffff;
border-color:#99ccff;
font-weight:bold;}
.bar{background:#336699;
width:100%;
height:30px;
border-top:1px solid #99CCFF;
border-bottom:1px solid #000000;}
.desbar{background:#FFFFFF;
width:100%;
padding: 10px;
border-top:1px solid #CCCCCC;
border-bottom:1px solid #000000;
color:black;
font-size:8pt;
height:105;}
.title{font-size:15pt;
color:white;
padding-left:10px;}
.bar A:link {text-decoration:none; color:white}
.bar A:visited {text-decoration:none; color:white}
.bar A:active {text-decoration:none; color:white}
.bar A:hover {text-decoration:none; color:yellow}
</STYLE>
<SCRIPT>
<!-- The fnInit function initializes the editable and non-editable regions -->
<!-- of the document -->
function fnInit(){
<!-- Ensure the display interface is not selectable, by making all -->
<!-- elements UNSELECTABLE -->
for (i=0; i<document.all.length; i++)
document.all(i).unselectable = "on";
<!-- Prepare the editable regions -->
oDiv.unselectable = "off";
oTextarea.unselectable = "off";
}
<!-- The fnToggleEdits function turns editing on or off in the editable -->
<!-- regions of the document -->
function fnToggleEdits(oObj,oBtn) {
currentState = oObj.isContentEditable;
newState = !currentState;
oObj.contentEditable = newState;
newState==false ? oBtn.innerHTML='Turn Editing On' :
oBtn.innerHTML='Turn Editing Off';
}
</SCRIPT>
</HEAD>
<BODY onload="fnInit();">
<!-- TOOLBAR_START --><!-- TOOLBAR_EXEMPT --><!-- TOOLBAR_END -->
<DIV CLASS="bar title">Editable Regions Sample</DIV>
<DIV CLASS="desbar">
<H4 style="font-size:10pt;">This example demonstrates the features of
Microsoft® Internet Explorer that enable users to edit the content
of an HTML element directly from the browser.</H4>
<P>This HTML editor is a <B>DIV</B> element set to be content-editable. Any
valid HTML content (text, images, form controls, etc.) can be pasted
and edited in this editor.</P>
<DIV ALIGN="center">
<DIV ALIGN="center" STYLE="height:210; width:90%;
background-color:#99CCFF; border:1px solid black">
<DIV CLASS="bar title">HTMLEditor (Content-Editable DIV)</DIV>
<DIV style="padding:10px">
<BUTTON ID="oEditDiv" TITLE="Turn Editing Off"
onclick='fnToggleEdits(oDiv,oEditDiv);oDiv.focus();'>
Turn Editing Off</BUTTON>
<BUTTON ID="oBoldBtn" TITLE="Bold"
onclick='if (oDiv.isContentEditable==true)
document.execCommand("Bold");'><B>Bold</B></BUTTON>
<BUTTON ID="oItalicBtn" TITLE="Italic"
onclick='if (oDiv.isContentEditable==true)
document.execCommand("Italic");'><I>Italic</I></BUTTON>
<BUTTON ID="oUndLnBtn" TITLE="Underline"
onclick='if (oDiv.isContentEditable==true)
document.execCommand("Underline");'><U>Underline</U></BUTTON>
<BUTTON ID="CreateLink " TITLE="Underline"
onclick='if (oDiv.isContentEditable==true)
document.execCommand("CreateLink");'><U>CreateLink</U></BUTTON>
<BUTTON ID="CreateLink " TITLE="Underline"
onclick='if (oDiv.isContentEditable==true)
document.execCommand("InsertImage","xx");'><U>InsertImage</U></BUTTON>
</DIV>
<DIV id=oDiv CONTENTEDITABLE ALIGN=left STYLE="height:100;
width:95%;background-color:white; font-face:Arial; padding:3;
border:inset #99ccff; scrollbar-base-color:#99ccff;
overflow=auto;"></DIV>
<BUTTON TITLE="Append from HTMLEditor"
onclick='oTextarea.value+=oDiv.innerHTML;oTextarea.focus();'>
Append to TextEditor</BUTTON>
</DIV>
</DIV>
<P>This text editor is a <B>TEXTAREA</B> element and is content-editable by
default. Only text can be edited in this tool. However, you can draft
HTML in the TEXTEditor and press the <B>Append to HTMLEditor</B> button
to see the result appended to HTMLEditor. The <B>Append to
TextEditor</B> button reverses this process by appending the
HTMLEditor's HTML as text to the TEXTEditor.
</P>
<BR/>
<DIV ALIGN="center">
<DIV ALIGN="center" STYLE="height:210; width:90%;
background-color:#99ccff; border:1px solid black">
<DIV CLASS="bar title">TEXTEditor (TEXTAREA)</DIV>
<DIV style="padding:10">
<BUTTON ID="oEditText" TITLE="Turn Editing Off"
onclick='fnToggleEdits(oTextarea,oEditText);
oTextarea.focus();'>Turn Editing Off</BUTTON>
</DIV>
<TEXTAREA id=oTextarea ALIGN=left STYLE="height:100; width:95%;
background-color:white; padding:3; border:inset #99ccff;
scrollbar-base-color:#99ccff; overflow=auto;"></TEXTAREA><BR/>
<BUTTON TITLE="Append to HTMLEditor"
onclick='oDiv.innerHTML+=oTextarea.value;oTextarea.focus();'>
Append to HTMLEditor</BUTTON>
</DIV>
</DIV>
<BR/>
<P>Both editors use the same function to activate or deactivate editing.
The function uses the <B>isContentEditable</B> property to test whether
editing is active. Accordingly, the <B>contentEditable</B> property is
then reversed to reset editing.</P>
</DIV>
<DIV CLASS="bar" STYLE=" padding:5px; padding-left:10">
<A href="http://www.microsoft.com/misc/cpyright.htm" target=_top>
©2001 Microsoft Corporation. All rights reserved. Terms of use.</A>
</DIV>
</body>
</html>
上面的例子我加了两个按钮，原例见：
http://msdn.microsoft.com/workshop/samples/author/dhtml/refs/editRegions.htm
参考：
http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/contentEditable.asp
http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/execCommand.asp
http://msdn.microsoft.com/workshop/author/dhtml/reference/commandids.asp
上一篇：滚动条颜色生成器IE5.5+
下一篇：加密页面代码生成器
