Firefox styles not applied correctly

2 posts, 0 answers
  1. Jonathan
    Jonathan avatar
    37 posts
    Member since:
    Sep 2012

    Posted 08 Jun 2012 Link to this post

    This is related to a previous post of mine regarding applying CSS Styles in the RadEditor (http://www.telerik.com/community/forums/aspnet-ajax/editor/cannot-change-applied-styles.aspx#2115033) In that issue the styles were not always been applied as desired. A solution was provided. I am now having a problem when I use that solution in Firefox. It works fine for me in IE and Chrome. 

    To recreate the situation I have created a simple test page which is shown below.
    Step 1: Highlight several words of the text and apply a style to it - say "what will happen in Firefox
    Step 2. Highlight one of the words in the middle of that last section - say "happen" and apply a different style to it

    What does occur is that the new style applied to the single word "happen" is instead applied to the rad editor body tag and so all the words that were not included in the original selection from step 1 are now showing the style that was meant to be applied only to the 1 word. (The style appears to bleed out into the rest of the text that has no other style already applied to it.)

    NOTE: this happens if the RemoveFormat command is executed in the OnClientCommandExecuting as I needed to do to solve my original problem as noted above. If you skip the removal of the class then this behaviour doesn't happen and I'm back to my original problem.

    NOTE 2: Actually if I remove the format manually instead of automatically using the OnClientCommandExecuting event - the same thing happens.  The steps again are - highlight a number of words and apply a class to it -  remove the formatting on one or two words in the middle of that text - then try to apply a new style to that text where the class was removed - and the class is applied to the body of the editor instead of the selected text.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Flow.prj_rtv.WebForm1" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <telerik:RadScriptManager Runat="server" id="sman"></telerik:RadScriptManager>
            <div>
         
                <telerik:RadEditor ID="RadEdBNumber" runat="server" Height="600px" EditModes="Design" OnClientCommandExecuting="My123ClientCommandExecuting"
                             Width="600px"  ContentAreaCssFile="~/prj_rtv/controls/RadEditorArea.css" >
                    <CssFiles>
                        <telerik:EditorCssFile Value="~/prj_rtv/css/rtv_broadcast.css" />
                    </CssFiles>
                            <Content>This is a test of what will happen in Firefox when I apply the styles now for you to test it here again.</Content>
                </telerik:RadEditor>
            </div>
     
            <telerik:RadScriptBlock ID="textRadEdit" runat="server" >
                <script type="text/javascript" >
     
                    function My123ClientCommandExecuting(editor, args) {
                        switch (args.get_commandName()) {
                            case "ApplyClass":
                                editor.get_document().execCommand("RemoveFormat", null, false);
                        }
                    }
                </script>
            </telerik:RadScriptBlock>
     
        </form>
    </body>
    </html>


    RadEditorArea.css:
    body
    {
        font-family: Verdana;
        font-size: 12px;
        color: White;
        background-color#192e4e;
    }

    rtv_broadcast.css
    .white_regular      { font-size: 12px; color: #fff;    font-weight: normal; font-style: normal}
    .white_bold         { font-size: 12px; color: #fff;    font-weight: bold; font-style: normal}
    .white_italic       { font-size: 12px; color: #fff;    font-weight: normal; font-style: italic}
    .white_bold_italic  { font-size: 12px; color: #fff;    font-weight: bold; font-style: italic}
    .yellow_regular     { font-size: 12px; color: #f8d939; font-weight: normal; font-style: normal}
    .yellow_bold        { font-size: 12px; color: #f8d939; font-weight: bold; font-style: normal}
    .yellow_italic      { font-size: 12px; color: #f8d939; font-weight: normal; font-style: italic}
    .yellow_bold_italic { font-size: 12px; color: #f8d939; font-weight: bold; font-style: italic}
    .red_regular        { font-size: 12px; color: #f84b39; font-weight: normal; font-style: normal}
    .red_bold           { font-size: 12px; color: #f84b39; font-weight: bold; font-style: normal}
    .red_italic         { font-size: 12px; color: #f84b39; font-weight: normal; font-style: italic}
    .red_bold_italic    { font-size: 12px; color: #f84b39; font-weight: bold; font-style: italic}
    .blue_regular       { font-size: 12px; color: #9a94fa; font-weight: normal; font-style: normal}
    .blue_bold          { font-size: 12px; color: #9a94fa; font-weight: bold; font-style: normal}
    .blue_italic        { font-size: 12px; color: #9a94fa; font-weight: normal; font-style: italic}
    .blue_bold_italic   { font-size: 12px; color: #9a94fa; font-weight: bold; font-style: italic}

  2. Jonathan
    Jonathan avatar
    37 posts
    Member since:
    Sep 2012

    Posted 09 Jun 2012 Link to this post

    I have found a work-around to this problem. I remove the class tag from the body of the rad editor and wrap the selected text in a font tag with the appropriate class and put it back into the editor.  My sample/test page is copied below. I'm not sure if this is the best way to handle this but it does seem to be working for me. The referenced css files are the same as in my original post above.

    The one fault I've realized it does have is that if the selected text included line feeds those are gone afterwards. It would similarily strip all other HTML tags because I'm using only the text but for our purposes the only HTML tags we want used are the font/span and br tags. I think replacing "editor.getSelection().getText()" with "editor.getSelection().getHtml() " would resolve that though.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Flow.prj_rtv.WebForm1" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <telerik:RadScriptManager Runat="server" id="sman"></telerik:RadScriptManager>
            <div>
         
                <telerik:RadEditor ID="RadEdBNumber" runat="server" Height="600px" EditModes="Design"
                             Width="600px"  ContentAreaCssFile="~/prj_rtv/controls/RadEditorArea.css"
                             OnClientCommandExecuting="My123ClientCommandExecuting"
                             OnClientCommandExecuted="My456ClientCommandExecuted">
                    <CssFiles>
                        <telerik:EditorCssFile Value="~/prj_rtv/css/rtv_broadcast.css" />
                    </CssFiles>
                            <Content>This is a test of what will happen in Firefox when I apply the styles now for you to test it here again.</Content>
                </telerik:RadEditor>
            </div>
     
            <telerik:RadScriptBlock ID="textRadEdit" runat="server" >
                <script type="text/javascript" >
     
                    function My123ClientCommandExecuting(editor, args) {
                        switch (args.get_commandName()) {
                            case "ApplyClass":
                                editor.get_document().execCommand("RemoveFormat", null, false);
                        }
                    }
     
                    function isBody(node) {
                        if (node.nodeType != 1) return false;
                        else return (node.tagName.toLowerCase() == "body")
                    }
     
                    function My456ClientCommandExecuted(editor, args) {
                        var commandName = args.get_commandName();
     
                        if (commandName == "ApplyClass") {
     
                            var className = args.get_value();
                            if (className == "") return;
     
                            var curHtmlElement = editor.getSelectedElement();
     
                            // this is a workaround for FireFox issue where a subtext fails to apply the new class and instead applies it to the body
                            if (isBody(curHtmlElement) && curHtmlElement.getAttribute("class") == className) {
                                curHtmlElement.removeAttribute('class');
                                editor.pasteHtml('<font class="' + className + '">' + editor.getSelection().getText() + '</font>');
                            }
                        }
                    }
                </script>
            </telerik:RadScriptBlock>
     
        </form>
    </body>
    </html>
Back to Top