Editor - Custom Content Filters

  • Show/Hide Border
  • Table Properties
  • Delete Table
  • Row
    • Insert Row Above
    • Insert Row Below
    • Delete Row
  • Column
    • Insert Column to the Left
    • Insert Column to the Right
    • Delete Column
  • Cell
    • Merge Cells Horizontally
    • Merge Cells Vertically
    • Split Cell Horizontally
    • Split Cell Vertically
    • Delete Cell
  • Cell Properties
  • Table Properties
  • Properties...
  • Image Map Editor
  • Properties...
  • OpenLink
  • Remove Link
  • Insert Select
  • Cut
  • Copy
  • Paste
  • Paste from Word
  • Paste Plain Text
  • Paste As Html
  • Paste Html
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

Filters in RadEditor are small code snippets, which are called in a sequence to process the editor content, when the mode (Design,HTML and 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. Also, it is respected when submitting the content, i.e., filters the submitted content.
  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.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
<%@ 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" %>
<!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">
    <title>Telerik ASP.NET Example</title>
    <link href="../Common/styles.css" rel="stylesheet" type="text/css" />
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-wide">
        <telerik:RadEditor RenderMode="Lightweight" runat="server" ID="RadEditor1" SkinID="BasicSetOfTools" OnClientLoad="TelerikDemo.OnClientLoad" Width="800px">
                    <h2 class="titleText">RadEditor for ASP.NET AJAX</h2>
                    <p style="text-align: justify;"><span style="font-size: 19px; color: #4f6128;"><strong>RadEditor</strong></span><span style="color: #4f6128;"> </span>is not simply an HTML<a href="#HTMLDescription"><sup>1</sup></a> Editor. It is what Microsoft chose to use in <strong>MSDN</strong>, <strong>CodePlex</strong>, <strong>TechNet</strong>, <strong>MCMS</strong> and even as an alternative to the default editor in <a href="http://www.telerik.com/products/aspnet-ajax/sharepoint.aspx">SharePoint</a>. Whether you need a mere Textbox with Google-like spellchecker, or a Word-like content authoring environment, the result is the same: clean <strong>XHTML</strong> output, fast rendering, widest cross-browser support, and <a href="http://www.telerik.com/products/aspnet-ajax/editor.aspx">tons of features</a>: <br />
                    <br />
                    <img src="../../images/editor.jpg" alt="product logo" style="margin-top: 25px; float: left; margin-right: 15px;" /></p>
                    <ul style="width: 350px; float: left;">
                        <em>Out-of-the-box XHTML-enabled Output...</em>
                        <em>Unmatched Loading Speed and Performance</em>
                        <em>Microsoft Word-like Spell-checking</em>
                        <em>Seven Ways for Pasting from Word</em>
                        <em>Multilevel Undo/Redo with Action Trails</em>
                        <em>Extended Functionality Through Integrated Controls</em>
    <script src="scripts.js" type="text/javascript"></script>

Find Assistance

Help Us Improve

Was this example helpful?