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.
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
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 server control that implements the
- 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
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.
Click the appropriate link to download the source code, including a sample web page.
- ASP.NET 2.0 or higher
- ASP.NET AJAX
- HtmlEditor.cs (the C# file for our server control)
- Images/*.gif (image files for our toolbar images)
- Two toolbar rows across the top
- Two tabs along the bottom
- An editor area that displays and/or edits the document in either mode
Click here for an online demo.