Telerik UI for ASP.NET AJAX

Filters in RadEditor for ASP.NET AJAX are small code snippets, which are called in a sequence to process the editor content, when the mode (html / design / preview) is switched or when the page is submitted. There are a number of built-in filters identified in the EditorFilters enumeration: RemoveScripts, MakeUrlsAbsolute, FixUlBoldItalic, FixEnclosingP, IECleanAnchors, MozEmStrong, ConvertFontToSpan, ConvertToXhtml, IdentHTMLContent, ConvertCharactersToEntities and DefaultFilters.Here are the descriptions of the different RadEditor's built-in filters:





No filters


This filter deletes the script tags to reduce the possibility of cross-site scripting and other script-related problems


This filter encodes all script tags from the content.


This filter makes all src and href attributes in the editor content have absolute URLs


This filter remove deprecated U tags and replace them with CSS - XHTML


This filter removes a paragraph if the whole content is inside it


This filter removes the current page href from all anchor (#) links


This filter changes b,strong and i,em in Mozilla browsers


This filter changes deprecated font tags to compliant span tags


This filter converts the HTML from the editor content area to valid XHTML


This filter indents the HTML content so it is more readable when you view the code


This filter converts reserved characters to their html entity names.


This filter converts XHTML compliant inline style attributes to Email compliant element attributes.


This filter fixes some pdf export issues.


This filter enables all default filters


<telerik:RadEditor ID="RadEditor1" ContentFilters="MakeUrlsAbsolute,FixEnclosingP" runat="server" />

You can enable and disable filters individually using server-side code:

For example to disable the RemoveScript server method of RadEditor, which strips the SCRIPT tags in the content area. set RadEditor1.DisableFilter(EditorFilters.RemoveScripts);

Implementing a Custom Filter

There are two steps that you should take to implement a custom filter:

1. Create a javascript function/class that implements one or more of the following filter methods -

  • getDesignContent(content) - Called when the editor is moving from some other mode to DESIGN mode

  • getHtmlContent(content) - Called when the editor is moving from some other state to HTML mode

  • set_description(string) - specifies a more detailed description for the module

  • set_name(string) - specifies the name of the module

  • set_enabled(boolean) - enable or disable the module depending on the boolean parameter

  • set_isDom(boolean) - specifies whether the filter will work with DOM objects or String, e.g. the boolean paramether specifies whether the content parameter of the getHtmlContent(content) and getDesignContent(content) functions will return DOM objects or String. The filter used in the Custom Content Filters demo is of type string and converts the lowercase letters to uppercase

  • MyFilter.initializeBase(this) - the initialization function of the module

2. Register the filter with the editor. The best way to achieve this is to register an OnClientLoad function that instantiates the filter and adds it to the filters manager.

Custom Filter Example

The filter modifies the editor content so that in HTML mode it is presented with capital letters while in Design mode, it is shown in lower-case letters. This is a fairly simplistic and unrealistic scenario that is only used to demonstrate what is necessary to create and "hook" a filter into Telerik RadEditor. In a real life scenario, the filter would likely employ a number of regular expressions of varying complexity that will make the necessary changes to the content.

<telerik:RadEditor runat="server" ID="RadEditor1" OnClientLoad="OnClientLoad">
<script type="text/javascript">
    function OnClientLoad(editor, args)
        editor.get_filtersManager().add(new MyFilter());
    MyFilter = function()
        this.set_name("RadEditor filter");    
        this.set_description("RadEditor filter description");
    MyFilter.prototype =
        getHtmlContent : function(content)    
            var newContent = content;      
            //Make changes to the content and return it      
            newContent = newContent.toUpperCase();      
            return newContent;    
        getDesignContent : function(content)    
            var newContent = content;
            //Make changes to the content and return it      
            newContent = newContent.toUpperCase();
            return newContent;
    MyFilter.registerClass('MyFilter', Telerik.Web.UI.Editor.Filter);

See Also