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

    Built-in Content Filters

    Words: 265   Characters: 1630 
    • 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