Ajax contorl toolkit HTMLEditorExtender Demonstration

To see how to implement client side onchange event on HtmlEditorExtender please click on this link: Samples

The HtmlEditorExtender is an ASP.NET AJAX Control that enables you to extend the standard ASP.NET TextBox control with support for rich formatting. For example, the HtmlEditorExtender enables users to apply bold, italic, underline, subscript, superscript, and different foreground and background color to text.

The HtmlEditorExtender control is very lightweight and takes advantage of HTML5. The new HtmlEditorExtender is compatible with IE6 and newer, and the latest versions of Mozilla Firefox, Google Chrome, and Apple Safari.

Furthermore, you can easily customize the toolbar buttons displayed by the HtmlEditorExtender. For example, you can customize the HtmlEditorExtender so that it displays only bold and italic buttons and no other buttons. Same way you can display Add image button and take the advantage to upload and insert images from the HtmlEditorExtender.

By default user has to configure sanitizer provider in the web.config file as described in the below security section. If user does not want to use sanitizer provider then user must set EnableSanitization property to false.

The HtmlEditorExtender is initialized with this code. The italic properties are optional:

        <ajaxToolkit:HtmlEditorExtender ID="HtmlEditorExtender1" 
            TargetControlID="TextBox1" DisplaySourceTab="true" 
            runat="server"/>
            <Toolbar> 
                <ajaxToolkit:Undo />
                <ajaxToolkit:Redo />
                <ajaxToolkit:Bold />
                <ajaxToolkit:Italic />
                <ajaxToolkit:Underline />
                <ajaxToolkit:StrikeThrough />
                <ajaxToolkit:Subscript />
                <ajaxToolkit:Superscript />
                <ajaxToolkit:JustifyLeft />
                <ajaxToolkit:JustifyCenter />
                <ajaxToolkit:JustifyRight />
                <ajaxToolkit:JustifyFull />
                <ajaxToolkit:InsertOrderedList />
                <ajaxToolkit:InsertUnorderedList />
                <ajaxToolkit:CreateLink />
                <ajaxToolkit:UnLink />
                <ajaxToolkit:RemoveFormat />
                <ajaxToolkit:SelectAll />
                <ajaxToolkit:UnSelect />
                <ajaxToolkit:Delete />
                <ajaxToolkit:Cut />
                <ajaxToolkit:Copy />
                <ajaxToolkit:Paste />
                <ajaxToolkit:BackgroundColorSelector />
                <ajaxToolkit:ForeColorSelector />
                <ajaxToolkit:FontNameSelector />
                <ajaxToolkit:FontSizeSelector />
                <ajaxToolkit:Indent />
                <ajaxToolkit:Outdent />
                <ajaxToolkit:InsertHorizontalRule />
                <ajaxToolkit:HorizontalSeparator />
                <ajaxToolkit:InsertImage />
            </Toolbar>
        </ajaxToolkit:HtmlEditorExtender>
            

• ImageUploadComplete - Raised on the server when an image is uploaded successfully. In this event an instance of AjaxFileUploadEventArgs is passed in the argument that contains file name, size and content type.

• TargetControlId - ID of textbox to extend with htmlEditor.
• Toolbar - This provides facility to customize toolbar as per requirement. This tag is optional and if user does not provide toolbar tag then by default all buttons will be populated in the toolbar. User must add at least 1 button in the toolbar tag.
• SanitizerProvider - Returns the Sanitizer Provider or null when no Sanitizer Provider is configured.
• DisplaySourceTab - Whether to display source tab to switch to Source view to see html contents.
• EnableSanitization - Whether to use sanitizer provider or not. By default value of this property is true.

We strongly recommend that you do not use the HtmlEditorExtender on a public website without using the Sanitizer Provider. If you do not use the Sanitizer Provider then your website will be open to Cross-Site Scripting (XSS) Attacks.

The HtmlAgilityPack Sanitizer Provider is included in the SanitizerProviders folder with the CodePlex release of the Ajax Control Toolkit. You need to add a reference to assemblies contained in the folder: SanitizerProviders.dll and HtmlAgilityPack.dll.

You must add the following configuration sections to your Web.config file to enable the 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="HtmlAgilityPackSanitizerProvider">
		<providers>			
            <add name="HtmlAgilityPackSanitizerProvider" 
            type="AjaxControlToolkit.Sanitizer.
            HtmlAgilityPackSanitizerProvider"></add>
		</providers>
	</sanitizer>
</system.web>
</configuration>
        

The AjaxControlToolkitSampleSite is configured to use the HtmlAgilityPack Sanitizer Provider.

Disclaimer:

The HTMLEditorExtender enables people to post arbitrary HTML to the server. We have made every effort to make this safe by following the recommendations made by OWASP (Open Web Security Project). In the spirit of open source collaboration, the user may use this entirely at their own risk.

These are the references we used to prepare this work:

J Williams, J Manico. (2012, May 16). XSS (Cross Site Scripting) Prevention Cheat Sheet [Web log article]. Retrieved from https://www.owasp.org/index.php/XSS_(Cross_Site_Scripting)_Prevention_Cheat_Sheet

R Snake. (2012, June 17). XSS (Cross Site Scripting) Cheat Sheet Esp: for filter evasion [Web log article]. Retrieved from http://ha.ckers.org/xss.html