Applying content filters to editor when it loses its focus

[Joseph Alfano]

Hi,

We have a page with many (>15) radEditors.  We would like to make sure that our output is XHTML compliant.  However, if we use the default behavior and apply the content filters upon submit, we observe a long delay before the page actually begins to submit, because the time it takes to execute the filters on all of the editors is long.  We have attempted to optimize this performance by disabling unneeded filters and following the guidance provided on your site, but the performace is still not what it needs to be for our application.

One possible solution we are investigating is to apply the filters on the blur event of the radEditors.  We have tried to implemented code like this:

    function RadEditor_OnClientLoad(editor, args) {
        var designElement = editor.get_contentArea();
        var htmlElement = editor._getTextArea();
        var jQueryWrappedSet = $([designElement , htmlElement]);
        jQueryWrappedSet .bind('blur', { editorId: editor.get_id() }, function(event) { onBlur(event.data.editorId); });
    }


    function onBlur(id) {
        var editor = $find(id);
        if (editor.get_mode() == 2)
            editor.set_mode(1);
        else
            setTimeout(function() { editor.set_html(editor.get_html(true)); }, 0);
    }

 

So what this code does is, in the radEditor onClientLoad event, get references to the design and html elements of the editor, and then use jQuery to attach an event handler to their blur events.

In the blur events we then apply the content filters.  If the editor is in html mode, we apply the filter by switching the editor to design mode.  If the editor is in design mode, we apply the fitlers by using the set_html function as documented here:
http://www.telerik.com/community/forums/aspnet-ajax/editor/run-custom-content-filter-on-load.aspx

(Note that for simplicity sake in this prototype code it assumes that the filters are currently on.  When we actually implement this, the ContentFilters property will be set to "None" in the markup, and then in the blur event handler we will programmically turn on the filters, apply them, and then disable them so that they will not be applied on page submit.)

There is problem with this solution.  Consider the case where editor "A" has focus, and then you click to set the focus to editor "B".  The problem is that in this case, both the set_mode and the set_html methods that are executed in the blur event of editor "A" set the focus back from editor "B" to editor "A".  This in turn fires the blur event of editor B, and you get an infinite loop.

Is there any way to invoke the set_mode and set_html methods on a radEditor without have the focus set back to that editor?  Or, more generally, is there a better way to apply content filters to the content of a radEditor when the editor loses its focus?

Thank you so much for your assistance!!!

Joe

[Dobromir]

Hi Joseph,

Unfortunately it is not possible to fire RadEditor's client method set_mode() without focusing the control. In order to avoid the infinite loop problem I suggest you to remove the handler inside its body.

In addition, for this scenario you can create a new FiltersManager object containing the required filters and assign it to the RadEditor control just before executing the filter by changing RadEditor's mode, e.g.:

var filterManager = new Telerik.Web.UI.Editor.FiltersManager();//creates new FiltersManager object
filterManager.add(new Telerik.Web.UI.Editor.ConvertToXhtmlFilter());//adds ConvertToXhtml filter to the newly created FilstersManager object
......
editor._filtersManager = filterManager;//assigns the filtersManager to RadEditor

You can get RadEditor's FiltersManager using the get_filtersManager() client method - if RadEditor is initially loaded with ContentFilters="None" it will return an object with no filters that can be assigned after the execution of the needed filters.

As an alternate solution I can suggest you to execute the content filters manually using the following approach:

var filter = new Telerik.Web.UI.Editor.ConvertToXhtmlFilter();
editor.set_html(filter.getHtmlContent(editor.get_document().body));

Note that some of the content filters are DOM filters (expects a DOM element as a parameter), while the others are normal filters and expects a string as a parameter.
DOM filters are: ConvertToXhtml, ConvertFontToSpan, FixEnclosingP, FixUlBoldItalic, MakeUrlsAbsolute, OptimizeSpans, PdfExportFilter.

I hope this helps.

Regards,
Dobromir
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.