New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Built-in 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
  • Built-in Filters Configurator

  • Filter List


















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. This example demonstrates the use of the editor's built-in content filters:

  • RemoveScripts: this filter removes script tags from the editor content. Disable the filter if you want to insert script tags in the content. You can examine more details about this filter in Preventing Cross-site Scripting (XSS) article.
  • EncodeScripts: this filter encodes all script tags from the content. You can examine more details about this filter in Preventing Cross-site Scripting (XSS) article.
  • StripCssExpressions: this filter strips CSS expressions to reduce the possibility of cross-site scripting. You can examine more details about this filter in Preventing Cross-site Scripting (XSS) article.
  • StripDomEventAttributes: this filter removes attribute DOM events from the HTML elements to reduce the possibility of cross-site scripting. You can examine more details about this filter in Preventing Cross-site Scripting (XSS) article.
  • MakeUrlsAbsolute: this filter makes all URLs in the editor content absolute (e.g. "http://server/page.html" instead of "page.html"). This filter is DISABLED by default.
  • FixUlBoldItalic: this filter changes the deprecated u tag to a span with CSS style.
  • IECleanAnchors Internet Explorer only - this filter removes the current page url from all anchor(#) links to the same page.
  • FixEnclosingP: this filter removes a parent paragraph tag if the whole content is inside it.
  • MozEmStrong: this filter changes b to strong and i to em in Mozilla browsers. - This filter is obsolete since Telerik UI version 2013 Q3
  • ConvertTags: This filter changes <b>, <i> and <strike> tags successively to <strong>, <em> and <del>
  • ConvertFontToSpan: this filter changes deprecated font tags to compliant span tags.
  • OptimizeSpans: this filter changes removes unneeded span elements.
  • ConvertToXhtml: this filter converts the HTML from the editor content area to 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.
  • PdfExportFilter: this filter fixes some pdf export issues.
  • ConvertInlineStylesToAttributes: this filter converts XHTML compliant inline style attributes to Email compliant element attributes.
  • RemoveExtraBreaks: This filter strips all extra brakes inside some tags like p, h1, etc.
  • DefaultFilters: the default editor behavior. All content filters except MakeUrlsAbsolute are activated.

Filters in RadEditor can be set in the markup:

<telerik:RadEditor ID="RadEditor1" ContentFilters="MakeUrlsAbsolute,FixEnclosingP" runat="server" />

as well as in the code behind:

C#
RadEditor1.ContentFilters = Telerik.Web.UI.EditorFilters.MakeUrlsAbsolute | Telerik.Web.UI.EditorFilters.FixEnclosingP;
VB.NET
RadEditor1.ContentFilters = Telerik.Web.UI.EditorFilters.MakeUrlsAbsolute Or Telerik.Web.UI.EditorFilters.FixEnclosingP

Filters can also be enabled/disabled individually through EnableFilter() and DisableFilter() methods (e.g. RadEditor1.DisableFilter(Telerik.Web.UI.EditorFilters.MakeUrlsAbsolute))

Related Resources

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="C#" Theme="Default" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs"Inherits="Telerik.Web.Examples.Editor.ContentFilters.DefaultCS"  %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<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" />
    <link href="styles.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-containers">
    <div class="demo-container">
        <telerik:RadEditor RenderMode="Lightweight" runat="server" ID="RadEditor1" Height="500px" Width="1000px" EnableResize="false"
            SkinID="DefaultSetOfTools">
            <Modules>
                <telerik:EditorModule Name="RadEditorStatistics" dockingzone="Bottom" Visible="true"
                    Enabled="true"></telerik:EditorModule>
                <telerik:EditorModule Name="RadEditorDomInspector" Visible="false" Enabled="true"></telerik:EditorModule>
                <telerik:EditorModule Name="RadEditorNodeInspector" Visible="false" Enabled="true"></telerik:EditorModule>
                <telerik:EditorModule Name="RadEditorHtmlInspector" Visible="false" Enabled="true"></telerik:EditorModule>
            </Modules>
            <Content>
            <img alt="product logo" src="../../images/productLogoLight.gif" />is the successor of the well known industry standard Editor for ASP.NET. The tight integration with ASP.NET AJAX and the powerful new capabilities make Telerik's WYSIWYG Editor a flexible and lightweight component, turning it into the fastest loading Web Editor. Among the hottest features are: 
            <ul>
                <li><em>Single-file, drag-and-drop deployment</em></li>
                <li><em>Built on top of ASP.NET AJAX</em></li>
                <li><em>Unmatched loading speed with new semantic rendering </em></li>
                <li><em>Full keyboard accessibility</em></li>
                <li><em>Flexible Skinning mechanism</em></li>
                <li><em>Simplified and intuitive toolbar configuration</em></li>
                <li><em>Out-of-the-box XHTML-enabled output</em></li>
            </ul>
            </Content>
        </telerik:RadEditor>
    </div>
    </div>

    <telerik:RadAjaxManager ID="RadAjax1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="SetFiltersButton">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadEditor1" LoadingPanelID="LoadingPanel1"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="FilterCheckboxList"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RestoreDefaults">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadEditor1" LoadingPanelID="LoadingPanel1"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="FilterCheckboxList"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

    <telerik:RadAjaxLoadingPanel runat="server" ID="LoadingPanel1"></telerik:RadAjaxLoadingPanel>

    <qsf:ConfiguratorPanel runat="server" Title="Built-in Filters Configurator" ID="ConfigurationPanel1">
        <Views>
            <qsf:View>
                <ul class="fb-group">
                    <li><qsf:CheckBoxList ID="FilterCheckboxList" runat="server" CssClass="filter-list" Label="Filter List">
                    </qsf:CheckBoxList></li>
                    <li><qsf:Button ID="SetFiltersButton" runat="server" Text="Update" OnClick="SetFiltersButton_Click" Size="Medium"></qsf:Button>
                    <qsf:Button ID="RestoreDefaults" runat="server" Text="Reset" OnClick="RestoreButton_Click" Size="Medium"></qsf:Button></li>
                </ul>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance