Possible to prevent HTML when switching to design view

[Mark Kucera]

I currently have a situation where i need to insert some meta information into my HTML content, that isn't valid HTML syntax.  Ultimately this information gets removed before the final product is visible to public users and the HTML will be valid, but internal users creating the document need to be able to enter this information and not have the RadEditor rewrite it when switching between design and html view.

An example would be something like this:

<table>
[BeginRepeater]
<tr>
<td> something here</td>
</tr>
[EndRepeater]
</table>

When i switch to design mode this HTML gets re-written to look like this:

[BeginRepeater]
[EndRepeater]
<table>
<tr>
<td> something here</td>
</tr>
</table>

So my question is this, is there  a way to disable or turn off this html rewrite?

my Editor tag looks like this:

 <telerik:RadEditor ID="EMailContentEditor" runat="server" Skin="Web20"  Width="95%" ContentFilters="RemoveScripts,IndentHTMLContent" ConvertToXhtml="false" ConvertFontToSpan="false" ExternalDialogsPath="/EditorDialogs" EditModes="Design,Html" Height="600px" OnClientCommandExecuting="OnClientCommandExecuting" OnClientLoad="OnClientLoad">

Regards,
-Mark

[Ianko]

Hello Mark,

The described behavior originates from the browser's HTML handling. If you test the same scenario in a simple editable iframe, the result will be the same.

As you mentioned, such elements (e.g. [BeginRepeater]) are not part of a correct table implementation. In cases where the HTML code does not pass the browser's validation, the incorrect elements are being appended at the top of the document.

Currently we are unable to modify it or fix it, because this is a browser behavior.

Nevertheless, I can suggest replacing these elements with valid ones via a custom content filter. I can only assume what is the used logic behind these elements, although on my end if I replace the brackets with HTML comment declarations, the elements are staying at their original place. This is the example custom content filter I used:

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

<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("RadEditor filter");
        this.set_description("RadEditor filter description");
    }

    MyFilter.prototype =
    {
        getDesignContent: function (content) {
            var newContent = content;
            newContent = newContent.replace(/\[/g, "<!-- ");
            newContent = newContent.replace(/\]/g, " -->");
            return newContent;
        }
    }
    MyFilter.registerClass('MyFilter', Telerik.Web.UI.Editor.Filter);
</script>

Regards,
Ianko
Telerik

[Mark Kucera]

Lanko,

Thanks for the information.  Part of me figured that this is what the answer would be.   We did experiment with the format of "meta" content and we did even come up with the idea of placing it in HTML Comment tags as you suggested.  This worked great from the standpoint that it wasn't moved by the browser, but the issue is that since it's in a HTML comment tag, it isn't visible in the designer view of the editor.  Is there a way to make HTML commented text appear in design mode in the editor?  I realize that the editor is relying on the rendering capabilities of the browser.

Regards,
-Mark

[Ianko]

Hello Mark,

I regret to inform you that I cannot suggest any appropriate approach, which could help you set such elements and preserve them correctly in the Design mode.

The only working implementation I can think of is to create a custom logic, which generates correct HTML code. For example, if the desired elements are in a table, they should be created as <tr><td>[element as text]</td><tr>, if they are in a list element - <li>[element as text]</li>. This logic could be created as a custom content filter, this way you will be able to use it only for the Design mode and for the HTML - to use a reversed logic. Additionally you could set a custom CSS stylization to these elements, so that they are recognizable by the user.

Such customization is not an easy task, however, due to the HTML environment I am unable to provide an easier approach for the desired functionality.  

Regards,
Ianko
Telerik