RadEditor for ASP.NET AJAX
Contents
RadControls 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:

 

Member

Description

None

No filters

RemoveScripts

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

EncodeScripts

This filter encodes all script tags from the content.

MakeUrlsAbsolute

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

FixUlBoldItalic

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

FixEnclosingP

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

IECleanAnchors

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

MozEmStrong

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

ConvertFontToSpan

This filter changes deprecated font tags to compliant span tags

ConvertToXhtml

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

IndentHTMLContent

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

ConvertCharactersToEntities

This filter converts reserved characters to their html entity names.

ConvertInlineStylesToAttributes

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

PdfExportFilter

This filter fixes some pdf export issues.

DefaultFilters

This filter enables all default filters

ContentFilters

CopyXML
<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.

CopyASPX
<telerik:RadEditor runat="server" ID="RadEditor1" OnClientLoad="OnClientLoad">
</telerik:RadEditor>
<script type="text/javascript">
    function OnClientLoad(editor, args)
    {    
        editor.get_filtersManager().add(new MyFilter());
    }
    MyFilter = function()
    {    
        MyFilter.initializeBase(this);    
        this.set_isDom(false);    
        this.set_enabled(true);    
        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);
</script>

See Also