How to achieve this simple editor functionality?

[Vincent]

Hi Telerik team

The following is my code snippet. what I want to achieve is when I copied the code snippet into editor html view and switch back to design view, it keeps everything same as I copied. I found it's very very hard to achieve that. Here are two scenarios I tested
1)
If I turn off the ContentFilters, most of the html tag & attriburte has just been upper-cased, and double quote has been removed, even my original code has "double quote" and html tag is lower-case. I guess there must be some magic things done by telerik editor. 

2) If I enable the default ContentFilters, then editor works most correctly, but it does some smart things which I don't need. e.g. align="right" will be changed to style="float:right".Because we are the email marketing company, we need to make sure our email is compatible for most of the email client. The style element can't be rendered by outlook2007 correctly. 

<img name="designtime" align="right" alt="Digg" src="../../../App_Themes/Modern/images/Icons/32x32/socialnetworking/digg_32.png" />

Please give some help, heaps of thanks.

Vincent

[Rumen]

Hi Vincent,

The content area of RadEditor is an editable IFRAME which uses the Rich Text Editing engine of the browser under which it operates. The IE engine produce upper-cased tags and removes the double quotes. This problem is handled by the ConvertToXhtml content filter of RadEditor. If it is disabled you will experience these problems in IE.

RadEditor is designed to produce valid XHTML compliant content with inline styles instead of using the obsolete inline attributes. I can suggest you to create your own custom content filter that will replace the inline styles with the respective inline attributes supported by different e-mail clients.

Here is an example demonstrating how to manipulate the images in the content area by using the RadEditor client-side api. The example shows how to strip the style attribute and apply width and height attributes to the images on submit:

Copy Code

Copy Code

<script type="text/javascript">
function OnClientSubmit(editor, args)
{
    var images = editor.get_document().getElementsByTagName("IMG");
    for (i=0; i<images.length; i++)
    {
       var image = images[i];
       var width = image.width;
       var height = image.height;
       image.removeAttribute("style");
       image.setAttribute("width", width);
       image.setAttribute("height", height);
    }

    alert(editor.get_html(true));

}
</script>

<telerik:radeditor runat="server" OnClientSubmit="OnClientSubmit" ID="RadEditor1">
    <ImageManager ViewPaths="~/Images" UploadPaths="~/Images" />
    <Content><IMG style="WIDTH: 543px; HEIGHT: 287px" alt="" src="/editorQ2SP12008/Images/Deisy.jpg"></Content>
</telerik:radeditor>
<input type="submit" value="submit" />

Here is another example demonstrating how to convert the float inline style with align attribute:

Copy Code

<script type="text/javascript">
function OnClientSubmit(editor)
{
    var images = editor.get_document().getElementsByTagName("IMG");
    var i = 0;

    for(i = 0; i < images.length; i++)
    {
        var align = images[i].style.styleFloat;
        var width = images[i].width;
        var height = images[i].height;

        if(align != null && align != "")
            images[i].setAttribute("align", align);

        if(width != null && width != "")
            images[i].setAttribute("width", width);

        if(height != null && height != "")
            images[i].setAttribute("height", height);

        images[i].removeAttribute("style");
    }
}
</script>

<telerik:radeditor runat="server" OnClientSubmit="OnClientSubmit" ID="RadEditor1" ContentFilters="none">
    <ImageManager ViewPaths="~/Images" UploadPaths="~/Images" />
    <Content><IMG style="WIDTH: 543px; HEIGHT: 287px;float:left;" alt="" src="/editorQ2SP12008/Images/Deisy.jpg"></Content>
</telerik:radeditor>
<input type="submit" value="submit" />

Here is another sample implementation of a custom content filter (fill free to modify the code so it will fit to your needs):

1. Set the OnClientLoad property of the editor to OnClientLoad.

2. Add the following javascript method :

Copy Code

function OnClientLoad(editor, args)
{
    editor.get_filtersManager().add(new ReplaceStylesWithAttributesFilter());
}

3. Add the implementation of the ReplaceStylesWithAttributesFilter:

Copy Code

ReplaceStylesWithAttributesFilter = function()
{
    ReplaceStylesWithAttributesFilter.initializeBase(this);
    this.set_isDom(false);
    this.set_enabled(true);
    this.set_name("RadEditor filter");
    this.set_description("RadEditor filter description");
}
ReplaceStylesWithAttributesFilter.prototype =
{
    getHtmlContent: function(content)
    {
        var newContent = content;

        var div = document.createElement("div");
        div.innerHTML = newContent;
        var nodes = div.getElementsByTagName("IMG");
        for (i = 0; i < nodes.length; i++)
        {
            this.replaceStylesWithAttributes(nodes[i]);
        }

        nodes = div.getElementsByTagName("P");
        for (i = 0; i < nodes.length; i++)
        {
            this.replaceStylesWithAttributes(nodes[i]);
        }

        newContent = div.innerHTML;
        return newContent;
    },

    replaceStylesWithAttributes: function(node)
    {
        if (node)
        {
            var width = node.style.width;
            if (width)
            {
                node.setAttribute("width", width);
                node.style.width = "";
            }
            var height = node.style.height;
            if (height)
            {
                node.setAttribute("height", height);
                node.style.height = "";
            }

            if (node.tagName == "IMG")
            {
                var floatJSProperty = ($telerik.isIE) ? "styleFloat" : "cssFloat";
                var floatValue = node.style[floatJSProperty];
                if (floatValue)
                {
                    node.setAttribute("align", floatValue);
                    node.style[floatJSProperty] = "";
                }

                var vAlign = node.style.verticalAlign;
                if (vAlign)
                {
                    switch (vAlign)
                    {
                        case "text-bottom":
                            node.setAttribute("align", "bottom");
                            break;
                        case "middle":
                            node.setAttribute("align", "middle");
                            break;
                        case "top":
                            node.setAttribute("align", "top");
                            break;
                    }
                    node.style.verticalAlign = "";
                }
            }
            else if (node.style.textAlign)
            {
                node.setAttribute("align", node.style.textAlign);
                node.style.textAlign = "";
            }
        }
    }
}
ReplaceStylesWithAttributesFilter.registerClass('ReplaceStylesWithAttributesFilter', Telerik.Web.UI.Editor.Filter);

I hope this helps.



Best regards,
Rumen
the Telerik team

[Vincent]

First, thanks telerik team for your fast reply.

I tried same code snippet among Dexexpress editor, FCKEditor, TinyMCE editor in IE and Firefox, they all works fine without having that issue you've mentioned for IE only (The IE engine produce upper-cased tags and removes the double quotes.). It seems a bit hard to work it out in RadEditor

[Rumen]

Hi Vincent,

The competitors' editors also run content filters to solve the IE problem. They are the ConvertToXhtml and ConvertFontToSpan filters that handle the IE problems in RadEditor. If they are disabled the editor will not overwrite and correct the HTML produced by the browser.

You can very easy verify my words by testing an editable IFRAME element in Internet Explorer. You will see that the Rich Text Editing engine of IE produces upper-case tags. For your convenience I have attached a sample HTML page with an editable IFRAME in it.

You can see my test in the following video: http://screencast.com/t/w8wkFacAkdat.

Best regards,
Rumen
the Telerik team

[Vincent]

Hi Rumen 

I tried to create my custom ConvertToXhtml content filter, somehow when I register it, the other filters functionality have gone. I'd like to use most of the RadEditor default content filter except ConvertToXhtml filter. Is that possible?


Thanks

[Rumen]

Hello Vincent,

The ContentFilters property is enum and you can assign multiple filter options to it, e.g.

<telerik:RadEditor ID="RadEditor1" ContentFilters="ConvertToXhtml,ConvertFontToSpan,FixEnclosingP" runat="server" />

You can find more information in this help article: http://www.telerik.com/help/aspnet-ajax/contentfilters.html

Kind regards,
Rumen
the Telerik team

[Vincent]

Hi Rumen

it's me again. I am still having problem with IE.

I wrote my own filter to convert style back to attribute, and it works fine. what happens now is once I register my custom filter, it will automatically turn off other filters. e.g. ConverToXhtml filter, the reason is some of the html tag has been changed to upper case and removed double quote.

I actually don't want to turn off the ConvertToXhtml filter, because this filter helps me add double quote for IE and convert to lowercase which makes really nice. 

So my question is what's the precedence of the custom filter? 

My js

ReplaceStylesWithAttributesFilter = function () {

    ReplaceStylesWithAttributesFilter.initializeBase(this);

    this.set_isDom(false);

    this.set_enabled(true);

    this.set_name("Custom EmailEditor filter");

    this.set_description("This filter is used to revert style back to attribute for html element");

}

 

ReplaceStylesWithAttributesFilter.prototype = {

    getHtmlContent: function (content) {

        var newContent = content;

        var div = document.createElement("div");

        div.innerHTML = newContent;

 

        var tags = div.getElementsByTagName("img");

        //IMG tags

        var length = tags.length;

 

        for (var i = 0; i < length; i++) {

            var obj = tags[i];

            this.revertImageStyle(obj);

        }

 

        newContent = div.innerHTML;

        return newContent;

    },

    revertImageStyle: function (obj) {

        var floatJSProperty = ($telerik.isIE) ? "styleFloat" : "cssFloat";

 

        //var align = obj.getAttribute("align");

 

        var styleProperty = obj.style[floatJSProperty];

 

        if (styleProperty) {

            styleProperty = styleProperty.toLowerCase();

            switch (styleProperty) {

                case "left":

                case "right":

                    align = obj.setAttribute("align", styleProperty);

                    $(obj).css("float", "");

                    break;

            }

 

        }

    }

}

ReplaceStylesWithAttributesFilter.registerClass("ReplaceStylesWithAttributesFilter", Telerik.Web.UI.Editor.Filter);

My Html

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="adjustAlignment.aspx.cs" Inherits="adjustAlignment" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />
</head>
<body>
    <form id="form1" runat="server">

    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        <Scripts>
            <%--Needed for JavaScript IntelliSense in VS2010--%>
            <%--For VS2008 replace RadScriptManager with ScriptManager--%>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
        </Scripts>
    </telerik:RadScriptManager>
    <telerik:RadCodeBlock runat="server">
    <script src="../js/1.3.2/jquery-1.3.2.js" type="text/javascript"></script>
    <script type="text/javascript" src="../js/smprocustomfilter.js"></script>
    <script type="text/javascript">
        function OnClientLoad(editor, args) {
            editor.get_filtersManager().add(new ReplaceStylesWithAttributesFilter());
        }
    </script>
    </telerik:RadCodeBlock>

    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="Panel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="Panel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <div>
        <asp:Panel ID="Panel1" runat="server">
            <telerik:RadEditor Height="300px" ID="RadEditor1" EnableResize="false"
            style="margin-top: 100px" EnableViewState="false" runat="server" OnClientLoad="OnClientLoad" ContentFilters="ConvertToXhtml">
                <Content>
                <img src="redalert.gif" align="right"></img>
                asdsadsad
                </Content>
            </telerik:RadEditor>
        </asp:Panel>
    </div>
    </form>
</body>
</html>

[Rumen]

Hello Vincent,

The problem is due to that the custom filter is executed after the built-in filters.

Nevertheless, you can easily fix the problem without writing a custom content filter and without disabling the ConvertToXhtml filter.

The first approach is to disable the CleanAttributesFilter private content filter in the OnClientLoad event:

<script type="text/javascript">
    function OnClientLoad(editor, args) {
        var filterManager = editor.get_filtersManager();
        filterManager.remove(filterManager.getFilterByName("CleanAttributesFilter"));
    }
</script>

Another approach is to overwrite only the convertImgAlignAttribute function of the CleanAttributesFilter by putting the JavaScript function below the RadEditor's declaration:

<telerik:RadEditor Height="300px" ID="RadEditor1" EnableResize="false"
style="margin-top: 100px" EnableViewState="false" runat="server" OnClientLoad="OnClientLoad" ContentFilters="ConvertToXhtml">
    <Content>
    <img src="redalert.gif" align="right"></img>
    asdsadsad
    </Content>
</telerik:RadEditor>
<script type="text/javascript">
    Telerik.Web.UI.Editor.CleanAttributesFilter.prototype.convertImgAlignAttribute = function (obj) {
    }
</script>

Sincerely yours,
Rumen
the Telerik team