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 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 |
| DefaultFilters |
This filter enables all default filters |
You can assign these enumeration members to the
ContentFilters property:
| Assigning ContentFilters inline |
 Copy Code |
|
<telerik:RadEditor ID="RadEditor1" ContentFilters="MakeUrlsAbsolute,FixEnclosingP"
runat="server" />
|
| [C#] Assigning ContentFilters via codebehind |
Copy Code |
|
RadEditor1.ContentFilters =
Telerik.Web.UI.EditorFilters.MakeUrlsAbsolute |
Telerik.Web.UI.EditorFilters.FixEnclosingP;
|
| [VB] Assigning ContentFilters via codebehind |
Copy Code |
|
RadEditor1.ContentFilters = Telerik.Web.UI.EditorFilters.MakeUrlsAbsolute Or Telerik.Web.UI.EditorFilters.FixEnclosingP
|
You can enable and disable filters individually using server-side code:
| [C#] Using EnableFilter and DisableFilter |
Copy Code |
|
RadEditor1.EnableFilter(Telerik.Web.UI.EditorFilters.FixEnclosingP);
RadEditor1.DisableFilter(Telerik.Web.UI.EditorFilters.MakeUrlsAbsolute);
|
| [VB] Using EnableFilter and DisableFilter |
Copy Code |
|
RadEditor1.EnableFilter(Telerik.Web.UI.EditorFilters.FixEnclosingP)
RadEditor1.DisableFilter(Telerik.Web.UI.EditorFilters.MakeUrlsAbsolute)
|
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 - Called when the editor is moving from some other mode to DESIGN mode
- getHtmlContent - Called when the editor is moving from some other state to HTML mode
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.
| ASPX/ASCX |
Copy Code |
|
<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