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.
RadEditorArea.css:
rtv_broadcast.css
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">
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
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
}