you may want to search msdn or the internet in general for "editable regions" ... this will give more insight into how they actually work and such.
Main Topics
Browse All TopicsHello.
I have a basic newsletter app that I created for a few of our departments to send out html e-newsletters. all of the development for the page output and template has been done. however, if users want to bold, underline, add images, or apply any other styles to the body of the email, I included basic instructions featuring code examples for each of the above concepts. is there a way to automate this more? For example, in hotmail or yahoo (other mail programs), users can select a button to do the coding for them. Can this be done in my generic mail program? is there a way to simplify things?
thanks.
This Question has been solved and asker verified All Experts Exchange premium technology solutions are available to subscription members.
Experts Exchange has been collecting answers to technology questions since 1996…3 million and counting! If you have a question, chances are we already have your answer.
If you can't find the exact answer you're looking for, ask our exclusive community of 50,000 experts. You’ll get a personalized answer from a trusted professional.
Thousands of free tech tips, tricks, how-to’s and tutorials are available in our peer reviewed articles section. See for yourself how smart our experts are, no login required.
Access the answers to your technology questions today.
30-day free trial. Register in 60 seconds.
Members of the expert community talk about why the experience at Experts Exchange is different than what you will find anywhere else.

Try it out and discover for yourself.
30-day free trial. Register in 60 seconds.
Join the community of experts here and help other tech pros by answering question in your area of expertise. You can earn FREE access to all Experts Exchange's premium features and resources.
Business Accounts
Answer for Membership
by: substandPosted on 2005-07-05 at 08:45:56ID: 14370207
These applications are not easy to make, but there are several available on the market. This one is the one we've used when clients request such functionality:
;
le = "on";
is example demonstrates the features of
v,oEditDiv );oDiv.foc us();'> rue) ");'><B>Bo ld</B></BU TTON> rue) ic");'><I> Italic</I> </BUTTON> rue) rline");'> <U>Underli ne</U></BU TTON> ommand('Fo reColor',f alse,'red' );" id=oDiv CONTENTEDITABLE ALIGN=left STYLE="height:100; :white; font-face:Arial; padding:3; ff; oDiv.inner HTML;oText area.focus ();'>
xtarea,oEd itText);
ff; overflow=auto;"></TEXTAREA ><BR/> Textarea.v alue;oText area.focus ();'> .com/info/ cpyright.h tm" target=_top>
http://www.fckeditor.net/
they are bulky, and i think may even be considered "Security risks" by the new windows firewall or whatever protection they've tried to put in IE, and must be downloaded by the user. this all used to happen automatically before windows XP SP 2.
that one includes all sorts of stuff... you may be able to use the "editable div" (its a concept that runs the whole thing and only works in IE) in connection with some dhtml to create just the bolding and such which will be a lot more light weight. i was able to make a "form field" that kept track of changes in red. I think its in the CF solutions here somewhere.
in the mean time, its not easy enough for me to show an example in the time i have to answer this question, so i'll point you in the right direction in this example from MSDN: (this is how i found it on my computer, i did not research msdn so it might be a bit off)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<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).unselectab
<!-- 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;">Th
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(oDi
Turn Editing Off</BUTTON>
<BUTTON ID="oBoldBtn" TITLE="Bold"
onclick='if (oDiv.isContentEditable==t
document.execCommand("Bold
<BUTTON ID="oItalicBtn" TITLE="Italic"
onclick='if (oDiv.isContentEditable==t
document.execCommand("Ital
<BUTTON ID="oUndLnBtn" TITLE="Underline"
onclick='if (oDiv.isContentEditable==t
document.execCommand("Unde
</DIV>
<DIV onkeypress="document.execC
width:95%;background-color
border:inset #99ccff; scrollbar-base-color:#99cc
overflow=auto;">The other value</DIV>
<BUTTON TITLE="Append from HTMLEditor"
onclick='oTextarea.value+=
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(oTe
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:#99cc
<BUTTON TITLE="Append to HTMLEditor"
onclick='oDiv.innerHTML+=o
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
©2002 Microsoft Corporation. All rights reserved. Terms of use.</A>
</DIV>
</body>
</html>