IE converts align="center" to align=middle

[Mark Kucera]

is there a way that i can override this?  it appears to be an IE only setting.  but align="center" has very different meaning than align="middle".  align="middle" is not even a valid value.  stupid IE.  the middle attribute is only applicable for the valign attribute.  If i have html code with align="center" it is immediately converted to align="middle" when the content is loaded in IE.  I am using the latest 2010 non-beta release of the Rad Controls.

My RadEditor definition code looks like this:

                        <telerik:RadEditor ID="EMailContentEditor" runat="server" Skin="Web20" Width="100%" ContentFilters="None"
                          ConvertToXhtml="false" ConvertFontToSpan="false"
                            EditModes="Design,Html" Height="600px" OnClientCommandExecuting="OnClientCommandExecuting"
                             OnClientLoad="OnClientLoad">
                            <CssFiles>
                                <telerik:EditorCssFile Value="/EditorBody.css?1" />
                            </CssFiles>
                            <Symbols>
                                <telerik:EditorSymbol Char="\u20AC" />
                                <telerik:EditorSymbol Char="\u00A2" />
                                <telerik:EditorSymbol Char="\u00A3" />
                                <telerik:EditorSymbol Char="\u00A5" />
                                <telerik:EditorSymbol Char="\u00A4" />
                                <telerik:EditorSymbol Char="\u00A9" />
                                <telerik:EditorSymbol Char="\u00AE" />
                                <telerik:EditorSymbol Char="\u2122" />
                                <telerik:EditorSymbol Char="\u00B1" />
                                <telerik:EditorSymbol Char="\u2260" />
                                <telerik:EditorSymbol Char="\u2248" />
                                <telerik:EditorSymbol Char="\u2264" />
                                <telerik:EditorSymbol Char="\u2265" />
                                <telerik:EditorSymbol Char="\u00F7" />
                                <telerik:EditorSymbol Char="\u00D7" />
                                <telerik:EditorSymbol Char="\u221E" />
                                <telerik:EditorSymbol Char="\u00BD" />
                                <telerik:EditorSymbol Char="\u00BC" />
                                <telerik:EditorSymbol Char="\u00BE" />
                                <telerik:EditorSymbol Char="\u00B2" />
                                <telerik:EditorSymbol Char="\u00B3" />
                                <telerik:EditorSymbol Char="\u2026" />
                                <telerik:EditorSymbol Char="\u2013" />
                                <telerik:EditorSymbol Char="\u2014" />
                                <telerik:EditorSymbol Char="\u25B6" />
                                <telerik:EditorSymbol Char="\u00E9" />
                                <telerik:EditorSymbol Char="\u2022" />
                                <telerik:EditorSymbol Char="\u271D" />
                            </Symbols>
                            <Modules>
                                <telerik:EditorModule Name="RadEditorHtmlInspector" Enabled="true" Visible="false" />
                                <telerik:EditorModule Name="RadEditorDomInspector" Enabled="true" Visible="true" />
                            </Modules>
                            <Tools>
                                <telerik:EditorToolGroup>
                                    <telerik:EditorTool Name="ModuleManager"></telerik:EditorTool>
                                </telerik:EditorToolGroup>
                            </Tools>
                            <FontNames>
                                <telerik:EditorFont Value="Arial" />
                                <telerik:EditorFont Value="Courier New" />
                                <telerik:EditorFont Value="Garamond" />
                                <telerik:EditorFont Value="Georgia" />
                                <telerik:EditorFont Value="MS Sans Serif" />
                                <telerik:EditorFont Value="Sego UI" />
                                <telerik:EditorFont Value="Tahoma" />
                                <telerik:EditorFont Value="Times New Roman" />
                                <telerik:EditorFont Value="Verdana" />
                            </FontNames>
                        </telerik:RadEditor>

and the referenced load scripts look like this:
                        <script language="javascript" type="text/javascript">

                            var beforePostbackHandler = function() {

                                var editor = $find("<%= EMailContentEditor.ClientID %>");
                                var colorArray = document.getElementById("<%= colorArray.ClientID %>");
                                var setCookie = document.getElementById("<%=setCookie.ClientID %>");
                                setCookie.value = "1";
                                colorArray.value = editor.get_colors();
                            }

                            function OnClientCommandExecuting(editor, args) {
                                var name = args.get_name();
                                var val = args.get_value();
                            }

                            function OnClientLoad(editor) {
                                editor.get_filtersManager().add(new SymbolsCustomFilter());
                                editor.get_filtersManager().add(new ImageAlignmentCustomFilter());
                            }

                            SymbolsCustomFilter = function() {
                                SymbolsCustomFilter.initializeBase(this);
                                this.set_isDom(false);
                                this.set_enabled(true);
                                this.set_name("RadEditor Symbol Filter");
                                this.set_description("RadEditor custom symbols replacement filter");
                            }

                            SymbolsCustomFilter.prototype =
                            {
                                getHtmlContent: function(content) {
                                    //Make changes to the content and return it    
                                    //Convert all symbols to their numeric HTML entities    
                                    newContent = content.replace(/\u20AC/g, "&euro;");
                                    newContent = newContent.replace(/\u00A2/g, "&cent;");
                                    newContent = newContent.replace(/\u00A3/g, "&pound;");
                                    newContent = newContent.replace(/\u00A5/g, "&yen;");
                                    newContent = newContent.replace(/\u00A4/g, "&curren;");
                                    newContent = newContent.replace(/\u00A9/g, "&copy;");
                                    newContent = newContent.replace(/\u00AE/g, "&reg;");
                                    newContent = newContent.replace(/\u2122/g, "&trade;");
                                    newContent = newContent.replace(/\u00B1/g, "&#177;");
                                    newContent = newContent.replace(/\u2260/g, "&#8800;");
                                    newContent = newContent.replace(/\u2248/g, "&#8776;");
                                    newContent = newContent.replace(/\u2264/g, "&#8804;");
                                    newContent = newContent.replace(/\u2265/g, "&#8805;");
                                    newContent = newContent.replace(/\u00F7/g, "&divide;");
                                    newContent = newContent.replace(/\u00D7/g, "&times;");
                                    newContent = newContent.replace(/\u221E/g, "&#8734;");
                                    newContent = newContent.replace(/\u00BD/g, "&frac12;");
                                    newContent = newContent.replace(/\u00BC/g, "&frac14;");
                                    newContent = newContent.replace(/\u00BE/g, "&frac34;");
                                    newContent = newContent.replace(/\u00B2/g, "&sup2;");
                                    newContent = newContent.replace(/\u00B3/g, "&sup3;");
                                    newContent = newContent.replace(/\u2026/g, "&#8230;");
                                    newContent = newContent.replace(/\u2013/g, "&#8211;");
                                    newContent = newContent.replace(/\u2014/g, "&#8212;");
                                    newContent = newContent.replace(/\u25B6/g, "&#9658;");
                                    newContent = newContent.replace(/\u2022/g, "&#8226;");
                                    newContent = newContent.replace(/\u00E9/g, "&eacute;");
                                    newContent = newContent.replace(/%5B%7E/g, "[~");
                                    newContent = newContent.replace(/%7E%5D/g, "~]");
                                    newContent = newContent.replace(/\u271D/g, "&#10013;");

                                    var tempImagePath = '<%=ConfigurationManager.AppSettings["baseImagePath"].ToString() %>';
                                    var libReplace = new RegExp("src=\"/ImageLibrary/", "g");
                                    newContent = newContent.replace(libReplace, "src=\"http://" + tempImagePath + "/ImageLibrary/");

                                    libReplace = new RegExp("src=\"../ImageLibrary/", "g");
                                    newContent = newContent.replace(libReplace, "src=\"http://" + tempImagePath + "/ImageLibrary/");
                                    
                                    return newContent;
                                }
                            }

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

                            ImageAlignmentCustomFilter = function() {
                                ImageAlignmentCustomFilter.initializeBase(this);
                                this.set_isDom(true);
                                this.set_enabled(true);
                                this.set_name("RadEditor Image Alignment Filter");
                                this.set_description("RadEditor custom image alignment filter");
                            }

                            ImageAlignmentCustomFilter.prototype =
                            {
                                getHtmlContent: function(content) {
                                     var images = content.getElementsByTagName("IMG");
                                      
                                     for(var i=0;i<images.length;i++)
                                     {
                                        var image = images[i];
                                        
                                        if (image.style.cssFloat)
                                        {
                                           image.setAttribute("align",image.style.cssFloat);
                                           //image.style.cssFloat = "";
                                        }
                                        else if (image.style.styleFloat) // styleFloat for IE
                                        {
                                           image.setAttribute("align", image.style.styleFloat);
                                        }
                                     }
                                     
                                    return content;
                                }
                            }

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

                            //]]>
                        </script>

[Rumen]

Hi Mark,

This browser bug should be fixed the RadEditor for ASP.NET AJAX. Can you please enable the ConvertToXhtml filter and test again.

If you are still able to reproduce the problem, implement a custom content filter that will replace the align=middle to align="center".

Sincerely yours,
Rumen
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.

[Mark Kucera]

Rumen, thanks so much.

The custom filter approach seems to be working really well.  In the past we had experimented with the ConvertToXhtml filter option but ended up turning it off because it caused our users more problems than it solved. Not that it was a problem with the filter, it was usually a problem with the content supplied by the end users. We have a few thousand users and getting them all to comply with well formed html is simply not attainable.  So i went with the custom filter to minimize the impact on other changes that could occur in their HTML.

Thanks for the tip!
-Mark