Newsletter App: Automating Process for users like yahoo or hotmail??

Hello.

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.
synergeticsoulAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

substandCommented:
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:

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).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&#174; 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>
            </DIV>
            <DIV onkeypress="document.execCommand('ForeColor',false,'red');" 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;">The other value</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/info/cpyright.htm" target=_top>
    &#169;2002 Microsoft Corporation. All rights reserved. Terms of use.</A>
</DIV>
</body>
</html>



Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
substandCommented:
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.
synergeticsoulAuthor Commented:
Thank you!!!
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Servers

From novice to tech pro — start learning today.