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
