How to create an HTML Editor for ASP.NET AJAX

Sundaram · #1 (**permalink**) 09-01-2007, 06:19 AM

Introduction

Most blog, forum and Wiki applications use an HTML editor as the primary authoring tool for site content. With this type of 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, they may also view and/or edit the HTML source..

Microsoft AJAX (ASP.NET AJAX Extensions) introduces a new implementation model for server controls with related script. This article discusses how to create an HTML editor server control specifically for the Microsoft AJAX environment.

Sundaram · #2 (**permalink**) 09-03-2007, 08:09 AM

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 contents. 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.

Sundaram · #3 (**permalink**) 09-03-2007, 08:10 AM

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 IScriptControl interface
* 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.

Sundaram · #4 (**permalink**) 09-03-2007, 08:10 AM

# ASP.NET 2.0 installed
# ASP.NET AJAX Extensions 1.0 installed

Sundaram · #5 (**permalink**) 09-03-2007, 08:11 AM

# HtmlEditor.cs (C# file for our server control)
# HtmlEditor.js (JavaScript file for our client control)
# Images/*.gif (image files for our toolbar images)

Sundaram · #6 (**permalink**) 09-03-2007, 08:12 AM

Component appearance:

* 2 toolbar rows across the top
* 2 tabs along the bottom
* An editor area that displays and/or edits the document in either mode

Mramesh · #7 (**permalink**) 09-05-2007, 12:34 AM

hi sundaram
Could you please tell me about Component Parts are HtmlEditor.cs

Please tell me the code

thanks in advance
M Ramesh Kumar

Mramesh · #8 (**permalink**) 09-05-2007, 12:37 AM

hi sundaram
Could you please tell me about Component Parts is HtmlEditor.js also with code

thanks in advance
M Ramesh Kumar

Sundaram · #9 (**permalink**) 09-05-2007, 12:42 AM

HtmlEditor.cs

The component itself contains many different HTML elements, so the server control class is derived from CompositeControl. In addition, the class must implement the IScriptControl methods:

Code:

public class HtmlEditor : CompositeControl, IScriptControl

In CompositeControl, child controls are added in the CreateChildControls method:

Code:

protected override void CreateChildControls()
{
    ...

    CreateToolbars(...);

    this.Controls.Add(CreateHtmlArea());
    this.Controls.Add(CreateDesignArea());
    this.Controls.Add(CreateTabbar());
    this.Controls.Add(CreateUpdateArea());

    base.CreateChildControls();
}

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:

Code:

protected virtual IEnumerable<ScriptReference> GetScriptReferences()
{
    ScriptReference htmlEditorReference =
        new ScriptReference("Winthusiasm.HtmlEditor.HtmlEditor.js",
        "Winthusiasm.HtmlEditor");

    return new ScriptReference[] { htmlEditorReference };
}

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:

Code:

protected virtual IEnumerable<ScriptDescriptor> GetScriptDescriptors()
{
    ScriptControlDescriptor descriptor =
        new ScriptControlDescriptor("Winthusiasm.HtmlEditor",
        this.ClientID);

    descriptor.AddProperty("htmlencodedTextID", this.HtmlEncodedTextID);
    ...

    return new ScriptDescriptor[] { descriptor };
}

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:

Code:

protected override void OnPreRender(EventArgs e)
{
    ...

    if (!this.DesignMode)
    {
        // Test for ScriptManager and register if it exists.
        sm = ScriptManager.GetCurrent(Page);

        if (sm == null)
            throw new HttpException(
            "A ScriptManager control must exist on the current page.");

        sm.RegisterScriptControl(this);

        ...
    }

    base.OnPreRender(e);
}

Then Render must be modified to call RegisterScriptDescriptors:

Code:

protected override void Render(HtmlTextWriter writer)
{
    if (!this.DesignMode)
        sm.RegisterScriptDescriptors(this);

    base.Render(writer);
}

Sundaram · #10 (**permalink**) 09-05-2007, 12:50 AM

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 to 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
* Prototype initialize method
* Prototype dispose method
* Descriptor method
* Class registration

Namespace registration:

Code:

Type.registerNamespace("Winthusiasm");

Constructor:

Code:

Winthusiasm.HtmlEditor = function(element)
{
    Winthusiasm.HtmlEditor.initializeBase(this, [element]);

    this._htmlencodedTextID = "";
    ...
}

Prototype block with methods comma separated:

Code:

Winthusiasm.HtmlEditor.prototype =
{
    method1: function()
    {
        ...
    },

    method2: function()
    {
        ...
    },

    ...
}

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

Code:

get_htmlencodedTextID: function()
{
    return this._htmlencodedTextID;
},

set_htmlencodedTextID: function(value)
{
    this._htmlencodedTextID = value;
},

...

Prototype initialize method:

Code:

initialize: function()
{
    Winthusiasm.HtmlEditor.callBaseMethod(this, 'initialize');

    ...
},

Prototype dispose method:

Code:

dispose: function()
{
    ...

    Winthusiasm.HtmlEditor.callBaseMethod(this, 'dispose');
},

Descriptor method:

Code:

Winthusiasm.HtmlEditor.descriptor =
{
    properties: [ {name: 'htmlencodedTextID', type: String },
        ... ]
}

Class registration:

Code:

Winthusiasm.HtmlEditor.registerClass("Winthusiasm.HtmlEditor", 
    Sys.UI.Control);

Mramesh · #11 (**permalink**) 09-05-2007, 12:56 AM

hi sundaram,

Could you please tell me Use Model in HtmlEditor.
and Thanks for Component Parts are HtmlEditor.cs and HtmlEditor.js

thanks in advance
M Ramesh Kumar

Sundaram · #12 (**permalink**) 09-05-2007, 01:08 AM

Using the Code

It includes:

* The Winthusiasm.HtmlEditor control project
* A sample website that uses the HtmlEditor control
* A solution that contains both
Use Model

* Create the website as an "ASP.NET AJAX-enabled Web Site"
* Copy the assembly Winthusiasm.HtmlEditor.dll to the Bin folder
* Add a Register statement to the page
* Add a custom control Tag(s) to the page
* Use the Text property to set the editor HTML
* Save the HTML when appropriate
* Use the Text property to get the saved HTML

Example Register statement:

Code:

<%@ Register TagPrefix="cc"
    Namespace="Winthusiasm.HtmlEditor"
    Assembly="Winthusiasm.HtmlEditor" %>

Example custom control Tag:

Code:

<cc:HtmlEditor ID="Editor" runat="server" Height="400px" Width="600px" />

Example set Text:

Code:

Editor.Text = initialText;

Mramesh · #13 (**permalink**) 09-05-2007, 01:12 AM

hi sundaram,

Could you please tell me Use Model Details: Saving the HTML when Appropriate

thanks in advance
M Ramesh Kumar

Sundaram · #14 (**permalink**) 09-05-2007, 01:16 AM

Use Model Details: Saving the HTML when Appropriate

A Save button (or similar functionality) will most likely be placed on the page with the editor. When that element is triggered, the editor's "client-side" Save method should be called. This instructs the editor to store the current HTML (converting to XHTML if appropriate) and clears the modified flag. The sample web page defines a GetHtmlEditor() JavaScript method that demonstrates how to "find" the client-side editor object using the Microsoft AJAX $find syntax:

Code:

function GetHtmlEditor()
{
    return $find('<%= Editor.ClientID %>');
}

The SaveButton uses that method in its OnClientClick property to call the client-side Save method "before" the post-back takes place:

Code:

OnClientClick="GetHtmlEditor().Save()"

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

Code:

DataStore.StoreHtml(Editor.Text);

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
how to use ajax in asp.net and how to install ajax in my system	vel.m8	ASP and ASP.NET Programming	5	04-08-2008 08:55 PM
If I ask you to write 'VI' editor in C++ - How you'll proceed?	Sabari	C and C++ Programming	0	07-23-2007 01:37 AM
How to create html from the content of the textbox?	Balasubramanian.S	C# Programming	4	03-29-2007 08:30 AM
What Is Your Favorite HTML Editor?	spid4r	Web Design Help	0	03-08-2007 10:39 PM
which is the best html editor ?	webmaster	HTML, CSS and Javascript Coding Techniques	11	03-08-2007 12:40 PM