Ajax Control Toolkit July 2011 Release and the New HTML Editor Extender

I’m happy to announce the July 2011 release of the Ajax Control Toolkit which includes important bug fixes and a completely new HTML Editor Extender control. You can download the July 2011 Release by visiting the Ajax Control Toolkit CodePlex site at:


Using the New HTML Editor Extender Control

You can use the new HTML Editor Extender to extend any standard ASP.NET TextBox control so that it supports rich formatting such as bold, italics, bulleted lists, numbered lists, typefaces and different foreground and background colors.


The following code illustrates how you can extend a standard ASP.NET TextBox control with the HtmlEditorExtender:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Simple.aspx.cs" Inherits="WebApplication1.Simple" %>
<%@ Register TagPrefix="asp" Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <form id="form1" runat="server">

        <asp:ToolkitScriptManager runat="Server" />

            runat="server" />

            runat="server" />


This page has the following three controls:

  • ToolkitScriptManager – The ToolkitScriptManager renders all of the scripts required by the Ajax Control Toolkit.
  • TextBox – The TextBox control is a standard ASP.NET TextBox which is set to display multiple lines (a TextArea instead of an Input element).
  • HtmlEditorExtender – The HtmlEditorExtender is set to extend the TextBox control.

You can use the standard TextBox Text property to read the rich text entered into the TextBox control on the server.

Lightweight and HTML5

The HTML Editor Extender works on all modern browsers including the most recent versions of Mozilla Firefox (Firefox 5), Google Chrome (Chrome 12), and Apple Safari (Safari 5). Furthermore, the HTML Editor Extender is compatible with Microsoft Internet Explorer 6 and newer.

The HTML Editor Extender is very lightweight. It takes advantage of the HTML5 ContentEditable attribute so it does not require an iframe or complex browser workarounds. If you select View Source in your browser while using the HTML Editor Extender, we hope that you will be pleasantly surprised by how little markup and script is generated by the HTML Editor Extender.

Customizable Toolbar Buttons

Depending on the web application that you are building, you will want to display different toolbar buttons with the HTML Editor Extender. One of the design goals of the HTML Editor Extender was to make it very easy for you to customize the toolbar buttons.

Imagine, for example, that you want to use the HTML Editor Extender when accepting comments on blog posts. In that case, you might want to restrict the type of formatting that a user can display. You might want to enable a user to format text as bold or italic but you do not want the user to make any other formatting changes.


The following page illustrates how you can customize the HTML Editor Extender toolbar:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CustomToolbar.aspx.cs" Inherits="WebApplication1.CustomToolbar" %>
<%@ Register TagPrefix="asp" Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" %>
<head runat="server">
    <title>Custom Toolbar</title>
    <form id="form1" runat="server">

        Runat="server" />

        Text="Hello <b>world!</b>"
        Runat="server" />

            <asp:Bold />
            <asp:Italic />


Notice that the HTML Editor Extender in the page above has a Toolbar subtag. You can list the toolbar buttons which you want to appear within the subtag. In the case above, only Bold and Italic buttons are displayed.

Here is a complete list of the Toolbar buttons currently supported by the HTML Editor Extender:

  • Undo
  • Redo
  • Bold
  • Italic
  • Underline
  • StrikeThrough
  • Subscript
  • Superscript
  • JustifyLeft
  • JustifyCenter
  • JustifyRight
  • JustifyFull
  • InsertOrderedList
  • InsertUnorderedList
  • CreateLink
  • UnLink
  • RemoveFormat
  • SelectAll
  • UnSelect
  • Delete
  • Cut
  • Copy
  • Paste
  • BackgroundColorSelector
  • ForeColorSelector
  • FontNameSelector
  • FontSizeSelector
  • Indent
  • Outdent
  • InsertHorizontalRule
  • HorizontalSeparator

Of course the HTML Editor Extender was designed to be extensible. You can create your own buttons and add them to the control.

Compatible with the AntiXSS Library

When using the HTML Editor Extender on a public facing website, we strongly recommend that you use the HTML Editor Extender with the AntiXSS Library. If you allow users to submit arbitrary HTML, and you don’t take any action to strip out malicious markup, then you are opening your website to Cross-Site Scripting Attacks (XSS attacks).

The HTML Editor Extender uses the Provider Model to support different Sanitizer Providers. The July 2011 release of the Ajax Control Toolkit ships with a single Sanitizer Provider which uses the AntiXSS library (see http://AntiXss.CodePlex.com ).

A Sanitizer Provider is responsible for sanitizing HTML markup by removing any malicious elements, attributes, and attribute values.

For example, the AntiXss Sanitizer Provider will take the following block of HTML:

<b><a href=””javascript:doEvil()””>Visit Grandma</a></b>


And return the following sanitized block of HTML:

<b><a href=””>Visit Grandma</a></b>

Notice that the JavaScript href and <SCRIPT> tag are both stripped out.

Be aware that there are a depressingly large number of ways to sneak evil markup into your HTML. You definitely want a Sanitizer as a safety net.

Before you can use the AntiXSS Sanitizer Provider, you must add three assemblies to your web application: AntiXSSLibrary.dll, HtmlSanitizationLibrary.dll, and SanitizerProviders.dll. All three assemblies are included with the CodePlex download of the Ajax Control Toolkit in the SanitizerProviders folder.

Here’s how you modify your web.config file to use the AntiXSS Sanitizer Provider:

        <sectionGroup name="system.web">
            <section name="sanitizer" requirePermission="false" type="AjaxControlToolkit.Sanitizer.ProviderSanitizerSection, AjaxControlToolkit"/>
        <compilation targetFramework="4.0" debug="true"/>
        <sanitizer defaultProvider="AntiXssSanitizerProvider">
                <add name="AntiXssSanitizerProvider" type="AjaxControlToolkit.Sanitizer.AntiXssSanitizerProvider"></add>

You can detect whether the HTML Editor Extender is using the AntiXSS Sanitizer Provider by checking the HtmlEditorExtender SanitizerProvider property like this:

if (MyHtmlEditorExtender.SanitizerProvider == null) {

   throw new Exception("Please enable the AntiXss Sanitizer!");


When the SanitizerProvider property has the value null, you know that a Sanitizer Provider has not been configured in the web.config file.

Because the AntiXSS library requires Full Trust, you cannot use the AntiXSS Sanitizer Provider with most shared website hosting providers. Because most shared hosting providers only support Medium Trust and not Full Trust, we do not recommend using the HTML Editor Extender with a public website hosted with a shared hosting provider.

Why a New HTML Editor Control?

The Ajax Control Toolkit now includes two HTML Editor controls. Why did we introduce a new HTML Editor control when there was already an existing HTML Editor?

We think you will like the new HTML Editor much more than the previous one. We had several goals with the new HTML Editor Extender:

  • Lightweight – We wanted to leverage HTML5 to create a lightweight HTML Editor. The new HTML Editor generates much less markup and script than the previous HTML Editor.
  • Secure – We wanted to make it easy to integrate the AntiXSS library with the HTML Editor. If you are creating a public facing website, we strongly recommend that you use the AntiXSS Provider.
  • Customizable – We wanted to make it easy for users to customize the toolbar buttons displayed by the HTML Editor.
  • Compatibility – We wanted to ensure that the HTML Editor will work with the latest versions of the most popular browsers (including Internet Explorer 6 and higher).

The old HTML Editor control is still included in the Ajax Control Toolkit and continues to live in the AjaxControlToolkit.HTMLEditor namespace. We have not modified the control and you can continue to use the control in the same way as you have used it in the past. However, we hope that you will consider migrating to the new HTML Editor Extender for the reasons listed above.


We’ve introduced a new Ajax Control Toolkit control with this release. I want to thank the developers and testers on the Superexpert team for the huge amount of work which they put into this control. It was a non-trivial task to build an entirely new control which has the complexity of the HTML Editor in less than 6 weeks.

Please let us know what you think! We want to hear your feedback. If you discover issues with the new HTML Editor Extender control, or you have questions about the control, or you have ideas for how it can be improved, then please post them to this blog. Tomorrow starts a new sprint Smile


  1. Stilgar says:

    It sounds great but I have some questions.

    1. Can we expect built in support for images in either of the two HTML Editor controls?
    2. Does the new control support markup view (for inserting images in markup)

    On a side note why does the AntiXSS library require full trust. It seems like it only needs to work with strings, string builders and the like and surely these do not require full trust.

  2. Roman says:

    And again we don’t have any support for image upload =(
    I know the control is extensible, but image upload is very often used feature, and it could be grate to have it build in.

  3. Jonathan says:

    There seems to be a bug when displayed in TabContainers. When not in a TabConainer, the editor looks correct. When within a TabContainer I get the original TextBox displayed and either the HTMLEditor is 1px wide and as long as the page, or right below the TextBox.

  4. @Stilgar, @Roman – Supporting image uploads would be a great feature. It was not something that we had the time to implement in this release. If enough people vote up the feature at CodePlex then we can attempt to support this feature in an upcoming sprint. I’ve added this as a feature request here:

  5. @Jonathan – Thanks for reporting this issue. I’ve created an issue to track this at CodePlex: ajaxcontroltoolkit.codeplex.com/workitem/26977

  6. Esben says:

    Hi Stephen

    The new HTML Editor Extender is much faster than the old HTML Editor. And I like very much that it is using the ContentEditable attribute. And the way we now can customize the Toolbar is simply great!
    But I think the HTML produced in the old Editor is prettier. The new Editor is using font tags with face and color attributes. But I think these are deprecated and you should use styles instead.

    Also would it be possible to add Headings (H1, H2, H3…) in the Editor in the future?

  7. Sean says:

    If has table insert/adjust feature, the control will be more useful.


  8. Sally says:

    ASP.NET MVC version?

  9. Paperino says:

    Support for

    would be great!

  10. Paperino says:

    Meant to say: support for &lt;blockquote&gt; 🙂

  11. Daniel R. H. says:

    The new HTML editor is great, not perfect! but awesome nonetheless

  12. Can we make this textbox such complex that it can accept HTML tags also. Like if I want to put it in my blog then I want to allow myself to enter HTML as well. For That we have extend this control further. Any suggestions on that.

  13. @Rupesh – I’ve added a feature request for adding source view support to the HtmlEditorExtender to CodePlex at ajaxcontroltoolkit.codeplex.com/workitem/26979 — if this feature request gets enough votes then we can attempt to implement it in an upcoming sprint. Thanks for the recommendation.

  14. Ryan says:

    Sorry, off topic, but what color scheme are you using for VS? I’m looking for something similar. Thanks!

  15. Daniel R. H. says:

    How can I set the font size to 3 as default, instead of the current default value of 1?

  16. Mike says:

    The number one voted issue on Codeplex with 200+ votes is over 4 years old. Why hasn’t that been implemented or closed?