preview content filter

[Chris]

In older editor demos there was a preview content filter that could be applied. That does not appear to be the case anymore. It seems to be that the design filter is used as the preview filter. Is there a way to set a content filter just for preview?

Thanks,
Chris

[Rumen Jekov]

Hi,

You can use the OnClientModeChange event and check whether the editor is placed in Preview mode using the editor.get_mode() method.

Regards,
Rumen

[Chris]

Thanks, is it possible to access the editor and its get_mode() method inside of the filter like:


getHtmlContent: function(content) {
                        var newContent = content;
                        var mode = get_editor().get_mode();  <-- get access to the editor here ?
                        switch (mode) {
                            case 1: //design
                                //do something
                                break;
                            case 2: //html
                                break;
                            case 4: //preview
                                //Make changes to the content and return it
                                newContent = newContent.toUpperCase();
                                break;
                        }

                        return newContent;

[Dobromir]

Hi Chris,

It is not possible to get a reference to the Editor, that is executing the content filter, from within the content filter's object. However, you can get reference to the editor using the $find() method.

In addition, the content filter's methods, getHtmlContent() and getDesignContent(), are automatically executed when the mode of the RadEditor is changed to the representing mode. Also, getHtmlContent() is executed on submit. The get_mode() method will always return the same value, if it is called in one of these functions.

All the best,
Dobromir
the Telerik team

[Chris]

Thanks for the hint on how to get he radeditor from within the content filter. I'm still not able to do what I want though. I want to replace certain "tags" in the content when the user switches to preview mode without changing the content shown in the other tabs. A simplified example would be that I want to display all content in uppercase when the user clicks Preview but show the original content in Design and HTML modes.

So far I have determined:
1) The content filter is not fired when the user switches between the Design and Preview modes
2) The content filter mode value is correct, 4, when the user switches from the HTML to preview modes
3) The content is updated to whatever is return when entering preview mode. E.G. The content is updated in the Design in HTML tabs when I return the uppercased content for preview mode from the getDesignContent filter.

The description of the older RAD content filter code shown here:
http://www.telerik.com/help/aspnet/editor/contentfilters.html
Says it does something similar to what I want:
"The filter modifies the editor content so that in HTML mode it is presented with capital letters while in Design mode, it is shown in lower-case letters."



Seems like it may not be possible to do what I want with the content filters in the new version or that I would need to take an entirely different approach. Any more suggestions?

Thanks,
Chris

My test code:

<script type="text/javascript">
                function OnClientLoad(editor, args) {
                    editor.get_filtersManager().add(new MyFilter());
                }
                MyFilter = function() {
                    MyFilter.initializeBase(this);
                    this.set_isDom(false);
                    this.set_enabled(true);
                    this.set_name("Preview EMail Template Filter");
                    this.set_description("Replaces EMail template tags in preview mode.");
                }
                MyFilter.prototype =
                {
                    getDesignContent: function(content) {
                        var newContent = content;
                        var editor = $find("<%= RadEditorBody.ClientID %>");
                        var mode = editor.get_mode();
                        alert("design c mode: " + mode);
                        switch (mode) {
                            case 1: //design
                                //do something
                                break;
                            case 2: //html
                                break;
                            case 4: //preview
                                //Make changes to the content and return it
                                newContentnewContent = newContent.toUpperCase();
                                break;
                        }

                        return newContent;
                    },

                    getHtmlContent: function(content) {
                        var newContent = content;
                        var editor = $find("<%= RadEditorBody.ClientID %>");
                        var mode = editor.get_mode();
                        alert("html c mode: " + mode);
                        switch (mode) {
                            case 1: //design
                                //do something
                                break;
                            case 2: //html
                                break;
                            case 4: //preview
                                //Make changes to the content and return it
                                newContentnewContent = newContent.toUpperCase();
                                break;
                        }

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

[Dobromir]

Hi Chris,

Yes you are correct. It is not possible to achieve the required functionality using a content filter. For your specific scenario I suggest to store the RadEditor's content in a hidden filed, make the required modification when switching to Preview mode, and restoring back the original when leaving it.

For your convenience I have attached a sample project implementing the above mentioned approach.

Best wishes,
Dobromir
the Telerik team