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
