IDC资讯中心
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"
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
htmleditors 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
