<html>
<head>
<title>ContentEditable Demo</title>
<script>
// Makes button look sunken when button is clicked
function BtnDown()
{
window.event.srcElement.style.borderStyle = "inset";
}// Makes button look raised when button is released
function BtnUp()
{
window.event.srcElement.style.borderStyle = "outset";
}// Executes commands depending on which button has been pushed
function Toggle()
{
// get button label
text = window.event.srcElement.innerText;

if (text == "ContentEditable")
{
if (document.all("edit").contentEditable == "true")
{
document.all("edit").contentEditable = "false";
window.event.srcElement.style.borderStyle = "outset";
}
else
{
document.all("edit").contentEditable = "true";
window.event.srcElement.style.borderStyle = "inset";
}

return;
} else if (text == "Bold")
document.execCommand("Bold"); else if (text == "Italic")
document.execCommand("Italic"); else if (text == "FontColor")
{
theColor = document.all.fontcolor.value;
if (theColor != "")
document.execCommand("ForeColor", false, theColor);
}

else if (text == "FontSize")
{
theSize = document.all.fontsize.value;
if (theSize != "")
document.execCommand("FontSize", false, theSize);
}

else if (text == "FontName")
{
theName = document.all.fontname.value;
if (theName != "")
document.execCommand("FontName", false, theName);
} else if (text == "InsertImage")
{
theImg = document.all.imagepath.value;
if (theImg != "")
document.execCommand("InsertImage", false, theImg);
} window.event.srcElement.style.borderStyle = "outset";
}
</script>
<style>
#edit {
position:absolute;
top: 25;
left: 225;
width: 350;
height: 350;
border:solid;
border-style:ridge;
border-width:5;
background-color:white;
}
.btn {
border:solid;
border-style:outset;
border-width:thin; font-weight:bold;
padding:2;
color:white;
background-color:#336699;
cursor:default;
}

</style>
</head><body bgcolor="#cc9966" unselectable="on"><div unselectable="on">
<br><span unselectable="on" class="btn" onmouseup="Toggle();" style="border-style:inset">ContentEditable</span>
<br><br><span unselectable="on" class="btn" onmousedown="BtnDown();" onmouseup="Toggle();" onmouseout="BtnUp();">Bold</span>
<br><br><span unselectable="on" class="btn" onmousedown="BtnDown();" onmouseup="Toggle();" onmouseout="BtnUp();">Italic</span>
<br><br><span unselectable="on" class="btn" onmousedown="BtnDown();" onmouseup="Toggle();" onmouseout="BtnUp();">FontColor</span>
<input type="text" id="fontcolor" size="10" value="red">
<br><br><span unselectable="on" class="btn" onmousedown="BtnDown();" onmouseup="Toggle();" onmouseout="BtnUp();">FontSize</span>
<input type="text" id="fontsize" size="1" value="7">
<br><br><span unselectable="on" class="btn" onmousedown="BtnDown();" onmouseup="Toggle();" onmouseout="BtnUp();">FontName</span>
<input type="text" id="fontname" size="14" value="comic sans ms">
<br><br><span unselectable="on" class="btn" onmousedown="BtnDown();" onmouseup="Toggle();" onmouseout="BtnUp();">InsertImage</span>
<input type="text" id="imagepath" size="14" value="/workshop/graphics/cone.jpg">
<br><br>
</div>
<div id="edit" contentEditable="true">
<p>This text is inside the editable region.</p>
</div></body>
</html>