Filters in Telerik RadEditor are small code snippets, which are called in a sequence to process the editor content, when the mode (html / design / preview) is switched.
Basically, the editor content is supplied to the filter chain and each filter gets a chance to modify it. Currently, the available filters correspond to the following editor properties:
|
Property |
Description |
StripAbsoluteAnchorPaths *
StripAbsoluteImagesPaths * |
When you create a relative link (i.e. href="Img/Logo.gif"), Internet Explorer will make this link absolute when saving content. As a result it will be transformed and saved as:
http://localhost/[YourApplication]/Img/Logo.gif
or
http://www.yourdomain.com/Img/Logo.gif
As a result, when it is time to move your application to a live server, all anchors/images paths will be wrong and will not work. To solve this huge problem, Telerik RadEditor has a built-in algorithm to strip the current location (localhost, 127.0.0.1, or any domain that is local at the time of editing), so that relative paths are actually saved as relative. |
| ConvertTagToLower |
Converts tag names to lower case, which is XHTML compliant. This property works only under IE. |
| AllowScripts |
Allows for (CLIENT or SERVER) script tags to be inserted/submitted with the editor. Eases the developer's job against script attacks. This property is false by default.
 |
Note: This property replaces the deprecated AllowServerScripts property. | |
| ConvertFontToSpan |
Gets or sets the value indicating whether RadEditor should convert the FONT tags to SPAN tags. |
| ConvertToXhtml |
Gets or sets the value indicating whether the client-side filter that converts the RadEditor content to XHTML is enabled. |
* There are two additional (and optional) properties, used for fine-tuning the behavior of the StripAbsoluteAnchorPaths and StripAbsoluteImagesPaths filters:
AnchorPathToStrip
ImagesPathToStrip
They are useful in some rare cases when the local absolute path to be stripped cannot be detected properly and has to be specified manually.
The other filters can be modified, detached and re-attached on the client if necessary, using the Filter API .
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 three 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
- GetPreviewContent - Called when the editor is moving from some other state to PREVIEW 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 |
 Copy Code |
|
<script type="text/javascript">
function RadEditorCustomFilter()
{
this.GetDesignContent = function (content)
{
var newContent = content;
//Make changes to the content and return it (you can run a regular expression to parse and modify the content)
newContent = newContent.toLowerCase();
return newContent;
};
this.GetHtmlContent = function (content)
{
var newContent = content;
//Make changes to the content and return it
newContent = newContent.toUpperCase();
return newContent;
};
this.GetPreviewContent = null; //Not mandatory to implement.
}
/* Use the editor onload function to register the filter with the FiltersManager */
function onClientLoad (editor)
{
var customFilter = new RadEditorCustomFilter();
editor.FiltersManager.Add(customFilter);
}
</script>
<rad:RadEditor
ID="editor1"
Runat="server"
OnClientLoad = "onClientLoad" >
</rad:RadEditor> |
See Also