editRegions.htm
<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"
>
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.asphttp://msdn.microsoft.com/workshop/author/dhtml/reference/methods/execCommand.asphttp://msdn.microsoft.com/workshop/author/dhtml/reference/commandids.asp http://www.itcnw.com/
打印文档
推荐好友 
返回顶部
增大字体 
减少字体