Ajax Control Toolkit July 2011 Release and the New HTML Editor Extender
- by Stephen Walther
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: http://AjaxControlToolkit.CodePlex.com 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">
<title>Simple</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ToolkitScriptManager runat="Server" />
<asp:TextBox
ID="txtComments"
TextMode="MultiLine"
Columns="60"
Rows="8"
runat="server" />
<asp:HtmlEditorExtender
TargetControlID="txtComments"
runat="server" />
</form>
</body>
</html>
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" %>
<html>
<head runat="server">
<title>Custom Toolbar</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ToolkitScriptManager
Runat="server" />
<asp:TextBox
ID="txtComments"
TextMode="MultiLine"
Columns="50"
Rows="10"
Text="Hello <b>world!</b>"
Runat="server" />
<asp:HtmlEditorExtender
TargetControlID="txtComments"
runat="server">
<Toolbar>
<asp:Bold />
<asp:Italic />
</Toolbar>
</asp:HtmlEditorExtender>
</form>
</body>
</html>
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>
<script>doEvil()</script>
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:
<configuration>
<configSections>
<sectionGroup name="system.web">
<section name="sanitizer" requirePermission="false" type="AjaxControlToolkit.Sanitizer.ProviderSanitizerSection, AjaxControlToolkit"/>
</sectionGroup>
</configSections>
<system.web>
<compilation targetFramework="4.0" debug="true"/>
<sanitizer defaultProvider="AntiXssSanitizerProvider">
<providers>
<add name="AntiXssSanitizerProvider" type="AjaxControlToolkit.Sanitizer.AntiXssSanitizerProvider"></add>
</providers>
</sanitizer>
</system.web>
</configuration>
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.
Summary
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
