Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q2 2011 released 07/12/2011
select

Editor / Custom Content Filters

   
 
 
 
 
   

  • Content Filters

    Filters in RadEditor are small code snippets, which are called in a sequence to process the editor content, when the mode (html / design / preview) is switched.

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

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="C#" Theme="Default" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.Editor.ContentFilters.DefaultCS" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="qsf" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <qsf:headtag id="Headtag1" runat="server"/>
    </head>
    <body class="BODY">
        <form id="form1" runat="server">
        <qsf:header id="Header1" runat="server" navigationlanguage="c#"/>
        <telerik:RadScriptManager ID="ScriptManager1" runat="server" />
            
        <telerik:radeditor runat="server" ID="RadEditor1" SkinID="DefaultSetOfTools" OnClientLoad="OnClientLoad">
            <Content>
                <strong><br />&nbsp;Switch to Html mode to run the content filter.<br />&nbsp;You will see that the casing is changed to upper case.</strong>
            </Content>
        </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.toLowerCase();
             return newContent;
           }
        }
        MyFilter.registerClass('MyFilter', Telerik.Web.UI.Editor.Filter);
        </script>
        <qsf:footer runat="server" id="Footer1"/>
        </form>
    </body>
    </html>

Get more than expected!

 
 

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2024 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451