Introduction

Most blog, forum, and Wiki applications use an HTML editor
as the primary authoring tool for site content. With this type of a
control, an online user can create and edit an HTML document. The user
is able to modify the text — including its format, fonts, and colors —
as well as add links and images. Often, the user can also view and/or
edit the HTML source.

Microsoft AJAX (ASP.NET AJAX
Extensions) introduces a new implementation model for server controls
with related scripts. This article discusses how to create an HTML
editor server control specifically for the Microsoft AJAX environment.
The reader can also download the source code, including a sample web page, and view an online demo.

Background

DesignMode

Most modern browsers now support the "editing" of displayed HTML content by the user. When the document designMode property is set to true, the rendered HTML on the page can be edited by the user. While in designMode, the document's execCommand
method supports additional commands that enable "programmatic"
modification of document content. For example, passing the command
string bold as the first parameter to execCommand causes the selected text to appear bold by adding appropriate HTML tags and/or attributes.

The resources listed at the end of this article discuss designMode and execCommand
in more detail, and describe how to implement a basic HTML editor.
Also, the source code available with this article can be examined for
implementation examples.

Microsoft AJAX Model for Server Controls with Related Scripts

As part of ASP.NET AJAX, Microsoft introduced a new "model" for
extending the capabilities of a server control with client-side script.
That model is described in an ASP.NET AJAX tutorial that should be read along with this article. In general, we create two related controls:

A related client control derived from Sys.UI.Control (part of the client-side AJAX library)

In order for ScriptManager to know how to create and initialize the related client control, we implement the new IScriptControl interface, adding two callback methods. Then, we add a few lines of code to OnPreRender and Render
to trigger those callbacks at appropriate times in the page life cycle.
The specifics are described in the tutorial, and again in the
discussion of HtmlEditor.cs below.

We also encapsulate our client-side behavior in a JavaScript class,
implemented as a Microsoft AJAX client control. This permits the client
control object to be created and initialized in a standard way by the
client-side AJAX code. The specifics are described in the tutorial, and
again in the discussion of HtmlEditor.js below.

To implement the IScriptControl interface, two callback methods are required. The first, GetScriptReferences, tells ScriptManager what related script file(s) to load and from where. For this server control, we have chosen to embed the HtmlEditor.js file in our assembly resources. We tell ScriptManager the full resource path and assembly name so that it can load it from there, simplifying deployment:

The second callback method, GetScriptDescriptors, "maps" properties in the client control(s) to properties in the server control. ScriptManager uses this information to set the appropriate values in the client control as part of its client-side creation:

Although we have now implemented the IScriptControl methods, there are two remaining modifications to make so that the IScriptControl callbacks get called. First, OnPreRender must be modified to call RegisterScriptControl, as follows:

HtmlEditor.js

Because the client-side behaviors for an HTML editor are fairly
extensive, there is a fairly extensive amount of JavaScript required in
the client control. Most of this is typical designMode
client-side programming. More from the point of this article, the
entire JavaScript code structure has been formatted to follow the
client-side coding model recommended by Microsoft for all client
controls built upon the AJAX client-side libraries. This includes:

Namespace registration

Constructor

Prototype block with all methods comma-separated

Prototype get and set methods for each property passed from the server control

Using the Code

Download the appropriate zip file and unzip it to a new directory. It includes:

The Winthusiasm.HtmlEditor control project

A sample website that uses the HtmlEditor control

A solution that contains both

Double-click the solution file to start Visual Studio, and then
select Build/Rebuild Solution from the menu. This will build the
project and copy the project DLL to the Bin folder of the sample website. Set the sample website as the Start Project, Demo.aspx as the Start Page, and press F5.

Use Model Details: Saving the HTML When Appropriate

The editor's "client-side" Save method instructs the editor to store the current HTML (converting to XHTML, if appropriate), and clears the modified flag. When the editor property AutoSave is set to true (the default), the client-side Save method is called automatically as part of the client-side ASP.NET validation process before the form is submitted. All controls with a CausesValidation property set to true (the default) trigger the behavior. If the AutoSave implementation is not appropriate or sufficient, the client script to trigger the client-side Save can be attached through the optional SaveButtons property, or manually.

Retrieving the Saved Text

In the server-side event handler, the Text property is used to retrieve the "saved" text:

DataStore.StoreHtml(Editor.Text);

Points of Interest

Embedded Resources

To simplify deployment, the HtmlEditor.js file and the image files for the toolbar buttons are embedded as resources within the HtmlEditor.dll assembly.

HtmlEncode and HtmlDecode

Storing un-encoded HTML in a form control, such as a text area or a
hidden input element, is problematic when submit behavior is triggered
on the client:

This implementation uses HiddenField to store the edited HTML, and therefore always stores the text in an HtmlEncoded state.

Setting the Text Property on Postback

The HiddenField used to store the HTML text is created within UpdatePanel. If the Text property is set during an "asynchronous" postback, the server control responds by calling Update on UpdatePanel and registers DataItem with ScriptManager. Because the client control uses an endRequest handler to monitor all PageRequestManager updates, it detects that DataItem has been registered, and automatically updates the HTML in the editor.

XHTML Conversion

Both Internet Explorer and Firefox output "HTML" when in designMode.
To convert to "XHTML", this implementation reads the "client-side" DOM
tree and outputs the elements and attributes in XHTML format. This
"client-side" conversion of HTML to its XHTML equivalent effectively
"hides" the underlying HTML implementation. When the user switches from
Design to HTML mode, the output displayed is XHTML. In addition, the
server-side Text property retrieves XHTML. Note that the editor configuration property OutputXHTML is defaulted to true. If set to false, no XHTML conversion takes place and the output is browser-generated HTML.

Converting Deprecated Syntax

Internet Explorer and Firefox both output and "expect to modify" deprecated syntax while operating in designMode.
Consequently, the implementation of this editor converts the deprecated
syntax into a standards-based equivalent when converting to XHTML. It
"restores" the deprecated syntax when converting back to designMode HTML. Note that the editor configuration property ConvertDeprecatedSyntax is defaulted to true. If set to false, no conversion takes place and the output includes the deprecated syntax.

Converting Paragraphs in Internet Explorer

Internet Explorer versions less than 9 output and "expect to modify" paragraph elements while operating in designMode. If the editor configuration property ConvertParagraphs is set to true, the implementation of this editor "modifies" the displayed style of paragraph elements while in designMode. It converts the paragraph elements into appropriate break and/or div elements when converting to XHTML, and "restores" the paragraph elements when converting back to designMode HTML. Note that this configuration property applies only to Internet Explorer versions less than 9 and is defaulted to false. Unless set to true, no conversion takes place, and the output includes the paragraph elements.

Caveats

Script Injection

A web page containing an HTML editor most likely stores the HTML
created by the user. Later, it probably displays that HTML in another
web page, perhaps for a different user. This presents a classic
exposure to Script Injection, and perhaps SQL Injection as well. The
client of the HTML editor should take appropriate steps to control these exposures.

Browser Testing

The control discussed in this article was tested on Firefox 2+, IE 6+, and Opera 9+.

Conclusion

Using the tutorial from Microsoft, as well as the designMode and execCommandresources
listed below, the HTML editor server control has been implemented to
work in a Microsoft AJAX environment. Possible enhancements include:

Share

About the Author

Eric Williams is a .NET and Web developer who has been working with ASP.NET AJAX since the March 2006 Atlas CTP. Eric is the founder of Winthusiasm (winthusiasm.com), a .NET technology company that offers consulting and development services, and Colorado Geographic (coloradogeographic.com).

Comments and Discussions

hey Eric...nice post and very helpful for me.
It would be great if you suggest me something here.

As we look the preview when we click on preview button. I'm just wishing to create a new .aspx page (dynamically) and put all formatted text in the body of that .aspx page when user clicks the save button.

I know this ask is out of scope here but i need just suggestion from your end, if u can?