Editable Panel/Text Box on a Webpage with a Capability to Display HTML Text Inside it

Devakumar Sai Chinthala

4.75/5 (3 votes)

Apr 7, 2010

CPOL

3 min read

42593

531

editable panel/text box on a webpage with a capability to display HTML text inside it

Download source - 23.87 KB

Introduction

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

Background

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

While researching other possibilities, an interesting capability of the div element in html which is supported by many popular browsers like Internet Explorer, Firefox and Safari, has drawn attention.
By adding the "contenteditable="true"", a div element behaves like a text box field, which allows text entry.
As you understand, a div element cannot post data to the server, so a workaround has been created to address the limitation.

Prerequisites

A web based browser to view the web page
Good knowledge of HTML and JavaScript

Into the Code

Making an editable text box/Rich text box starting with the 3 elements.

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

Here is the style sheet to makes 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 of 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 is without 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 multiple 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:

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 its attribute "contenteditable="true"", which makes 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 replaced, 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, I could not make use of any available free/commercial 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

History

7^th April, 2010: Initial post