Introduction

This article describes about how to make a editable panel/text box on a webpage with a capability to display HTML text inside it. The approach adapted here is specific to requirement.
The web page could be an .aspx, .html, .php or any other web based technology.

Background

While working on one of the project, the requirement is to display a formatted (HTML) text inside a text box. Upon researching on the possibility of dynamically positioning a div element inside a html text box control, unfortunately that approach had it's own challenges towards the placement, positioning & scrolling of text while the user enter the text inside the text box.

While researching on other possibilities, an interesting capability of the div element in html which is supported by many popular browsers like IE, Firefox and safari, has drawn the attention. The attribute
contenteditable="true"

By adding the "contenteditable="true"", a div element behave like a text box field, which allows text entry.
As you understand, a div element cannot post data to the server, so a work around has been created to address to the limitation.

Prerequisite

A web based browser to view the web page. Good knowledge of html and javascript.

Into the Code

Making a editable text box/Rich text box starts with the 3 elements.

A "Div" element.
Some javascript.
Style sheet to look like a textbox.

Here is the style sheet to make the div look like a text box.

    <style type="text/css">
    .editable {
        border-top-width : 1px;
        border-right-width : 1px;
        border-bottom-width : 1px;
        border-left-width : 1px;
        border-style  : dotted;
        white-space:pre-line;
        width:500px;
        height:200px;
        overflow:scroll;
        overflow-x:hidden;
        }
    </style>

An interesting attribute worth making a note is "white-space:pre-line;". It instructs the browser to display the text inside the div element in multi-line format.
Refer to "http://www.quirksmode.org/css/whitespace.html" for more information. if the above attribute is not used the text displayed in with out line breaks.

The actual html code to display the editable text entry is as below.

    <div id="TextEdit" class="editable">
        <div id="request" runat="server" contenteditable="true"></div>
        <div id="requestInner" style="border-left:solid 1px gray; margin-left:10px; margin-right:10px;" 
            contenteditable="false" UNSELECTABLE="ON"><b>I am the inner div</b><br />with multple lines. You can check me on this.<hr />
            This is the next line of text in <b>bold</b>, <i>Italic</i> and 
            <span style="text-decoration:underline">underlined</span>. 
            Click here for more details <a target="_blank" href="http://www.articledean.com">Articledean.com</a></div>
    </div>

The output of the above code looks like this
Editable Text

In order to achieve the text (HTML) inside a text box, I created a parent div element with id="TextEdit" and applied the stylesheet "editable".

Inside the parent div element, I added a child element id="request" and set it's attribute "contenteditable="true"", which make the div element as editable.

Right below the editable text area, I added another div element id="requestInner" with "contenteditable="false"" and displayed the rich text (HTML) inside it.

How to save the data.

To save the data, a hidden multi-line text box has been added to the webpage.
Once the user enters the text and clicks on save. The text entered in div is copied into the hidden text box, just before the form submit. Here is the javascript.

    <script type="text/javascript">
        function ReplaceTags(xStr) {
            var regExp = /<\/?[^>]+>/gi;
            xStr = xStr.replace(/<\/P>/gi, "\r\n");
            xStr = xStr.replace(/<BR>/gi, "\r\n");
            xStr = xStr.replace(/<P>/gi, "");
            xStr = xStr.replace(regExp, "");
            return xStr;
        }
        function onsaveclicked() {
            var reqDiv = document.getElementById("<%=request.ClientID %>");
            var hhrequestBox = document.getElementById("<%=hrequest.ClientID%>");
            var responseText = ReplaceTags(reqDiv.innerHTML);
            hhrequestBox.value = responseText;
            
            return true;
        }
    </script>

if you are wondering, why the method "ReplaceTags" is used. Here is the answer.
Due to the built-in asp.net web form validation, it does not allow any text box to submit the html tags. So all the tags are being replace, except the "P" and "BR".
In a typical text box, every time an "enter" key is pressed, it is represented by "\r\n" on windows system.

Remarks

This approach is not to make a rich text box like fckeditor, freetextbox or HTMLeditor. The purpose of this approach is very specific.
Due to the nature of project, could not make use of any available free/commerical editors.

References

http://msdn.microsoft.com/en-us/library/aa753622%28VS.85%29.aspx (MSHTML Editor)
http://msdn.microsoft.com/en-us/library/ms537837%28VS.85%29.aspx (Definition of contenteditable attribute)
http://www.quirksmode.org/css/whitespace.html