Custom Filter Help

[Erick Burgess]

The following filter obviously doesn't do anything, however there is an interesting side effect.

function OnRadEditorClientLoad(editor, args) {
    editor.get_filtersManager().add(new testFilter());
}

testFilter = function() {
    testFilter.initializeBase(this);
    this.set_isDom(false);
    this.set_enabled(true);
    this.set_name("RadEditor Strip Table Margins");
    this.set_description("Strip table margins");
}

testFilter.prototype = {
    getHtmlContent: function(content) {
        return testCleanContent(content);
    }
}

function testCleanContent(content) {
    var TOP_LEVEL_ELEMENT_TAG = "DIV_TOP_ELEMENT";
    var dom = document.createElement(TOP_LEVEL_ELEMENT_TAG);
    Telerik.Web.UI.Editor.Utils.setElementInnerHtml(dom, content);
    var textOut = dom.innerHTML;
    return textOut;
}

testFilter.registerClass('testFilter', Telerik.Web.UI.Editor.Filter);

If I use Telerik.Web.UI.Editor.Utils.setElementInnerHtml(dom, content), the default content filters do not appear to fire.  However if I do this instead:

function testCleanContent(content) {
    var textOut = content;
    return textOut;
}

the default content filters do their job.

Any ideas?

[Dobromir]

Hi Erick,

Actually, the built-in content filters are fired in both cases. The observed behavior is caused by the browser's default RichTextEditing engine.

By design, the custom content filters applied to the RadEditor are executed last. When the content is set as innerHTML to the newly created DOM element in the testCleanContent() function it is modified by the browser's engine and 'undo' the modifications made by the built-in filters.

Kind regards,
Dobromir
the Telerik team

[Erick Burgess]

So, how do I avoid "undoing" the built-in filters?

[Dobromir]

Hi Erick,

It is possible to partially avoid 'undoing' built-in content filters by applying custom DOM content filter. By design, the order of the filters execution is like follows:

1. Build-in DOM content filters
2. Custom DOM content filters
3. ConvertToXhtml built-in content filter
4. Built-in text content filters
5. Custom text content filters

Here is a sample custom DOM filter, wrapping the content of the editor inside a DIV element:

<telerik:RadEditor ID="RadEditor1" runat="server" OnClientLoad="OnClientLoad">
</telerik:RadEditor>

<script type="text/javascript">
    function OnClientLoad(editor, args)
    {
        editor.get_filtersManager().add(new testFilter());
    }

    testFilter = function ()
    {
        testFilter.initializeBase(this);
        this.set_isDom(true);
        this.set_enabled(true);
        this.set_name("RadEditor Custom DOM filter");
        this.set_description("Wraps the content inside new DIV element");
    }

    testFilter.prototype = {
        getHtmlContent: function (contentElement)
        {
            var childNodes = contentElement.childNodes;

            var newElem = document.createElement("DIV");
            while (childNodes.length != 0)
            {
                newElem.appendChild(childNodes[0]);
            }

            contentElement.appendChild(newElem);

            return contentElement;
        }
    }
    testFilter.registerClass('testFilter', Telerik.Web.UI.Editor.Filter);
</script>

Greetings,
Dobromir
the Telerik team