How To Add A Custom Filter To A RadEditor That Is An EditItem Of A RadGrid



TODO:

Have you ever wanted to add a custom filter to a RadEditor that is a EditItemTemplate in a RadGrid that lives in a RadAjaxPanel?  To get this accomplished, some out of the ordinary things need to happen, or else you will end up with the dreaded 'Telerik.Web.UI.Editor' is undefined error on page load.

 

SOLUTION:

1. Add JavaScript to the page, that will do some things we want to happen when we go from design to html mode in the RadEditor.

<telerik:RadCodeBlock ID="rcbGirdLoaded" runat="server">
        <script type="text/javascript">
            function StripXSS(content) {
                var newContent = content;
                //Make changes to the content and return it      
                newContent = newContent.replace(/iframe/gi, "");
                newContent = newContent.replace(/javascript:alert/gi, "");
                newContent = newContent.replace(/javascript/gi, "");
                
                //do some other stuff
                return newContent;
            }

            function CreateRadEditorXSSFilter(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 XSS filter");
                this.set_description("RadEditor XSS filter");
            }
            MyFilter.prototype =
            {
                getHtmlContent: function (content) {
                    return StripXSS(content);
                },
                getDesignContent: function (content) {
                    return StripXSS(content);
                }
            }

            //on grid created
            function AddXSSFilter()
            {
                MyFilter.registerClass('MyFilter', Telerik.Web.UI.Editor.Filter);
            }
        </script>
    </telerik:RadCodeBlock>

 

2.  Create your RadEditor, and set OnClientLoad to our function that creates the filter.

<telerik:RadEditor runat="server" ID="txtDescription" OnClientLoad="CreateRadEditorXSSFilter" RegisterWithScriptManager="false"  ToolsWidth="250px" AllowScripts="false" EditModes="Design,Html" >
</telerik:RadEditor>

 

3. Add the client setting to the RadGrid, that will fire when a PopUp is showing (Here we add the filter)

<ClientSettings>
     <ClientEvents OnPopUpShowing="AddXSSFilter" />
</ClientSettings>

 

NOTES:

Basically, MyFilter.registerClass('MyFilter', Telerik.Web.UI.Editor.Filter); , will cause an error on page load, because 'Telerik.Web.UI.Editor' will be undefined.  We only want to execute that line, once the grid is loaded, and more so when the RadEditor is known.  Since this is in AJAX, and a PopUp editor window, that line needs to happen when the client 'PopUpShowing' event is called.  These code snippets show how to accomlish this.