Editor: IE8, IE9, FF4 can't set italic

[Shukhrat Nekbaev]

Hi,

I use pretty simple set of Editor. On IE8 and previous version of controls I could select text, make it italic, set background and foreground colors, after I upgrades to most recent one and installed IE9 something has changed. I can do all I could do before if I switch into IE7 compatibility mode, when I'm in IE8, IE8 and FF4 Editor doesn't let italic happen: no change in editor no button gets toggled.

There is a hierarchy of control that loaded dynamically and editor is one of them.

Also 2 related questions:
1)JS below has issue that was toggling very interesting flickering on IE8 with previous versions of controls, haven't tested yet with current version and IE9 if also happens

2)when a page that loads dynamic controls is loaded first time and inside some of those controls there is Editor or TreeList (haven't checked other controls) - the appearance of controls is broken, feels like they didn't have a chance to recalculate their layout using JS. When I navigate away and come back - view is ok. I have made a lot of css chnages to site, so if I will experience this behaviour I will attach screenshot

here is my Editor:

<telerik:RadEditor ID="radEditor" runat="server" EditModes="Design" Skin="Default"
          OnClientSubmit="OnClientSubmit" OnClientLoad="OnClientLoad" StripFormattingOnPaste="AllExceptNewLines"
          StripFormattingOptions="AllExceptNewLines" Style="position: relative; right: 1px;"
          Width="100%" Height="150px" AutoResizeHeight="false">
          <Tools>
              <telerik:EditorToolGroup Tag="MainToolbar">
                  <telerik:EditorTool Name="Cut"></telerik:EditorTool>
                  <telerik:EditorTool Name="Copy" ShortCut="CTRL+C"></telerik:EditorTool>
                  <telerik:EditorTool Name="Paste" ShortCut="CTRL+V"></telerik:EditorTool>
              </telerik:EditorToolGroup>
              <telerik:EditorToolGroup>
                  <telerik:EditorTool Name="Bold" ShortCut="CTRL+B"></telerik:EditorTool>
                  <telerik:EditorTool Name="Italic" ShortCut="CTRL+I"></telerik:EditorTool>
                  <telerik:EditorTool Name="Underline" ShortCut="CTRL+U"></telerik:EditorTool>
                  <telerik:EditorTool Name="StrikeThrough"></telerik:EditorTool>
                  <telerik:EditorSeparator />
              </telerik:EditorToolGroup>
              <telerik:EditorToolGroup>
                  <telerik:EditorSplitButton Name="ForeColor">
                  </telerik:EditorSplitButton>
                  <telerik:EditorSplitButton Name="BackColor">
                  </telerik:EditorSplitButton>
              </telerik:EditorToolGroup>
          </Tools>
          <Content>
          </Content>
      </telerik:RadEditor>

and JS:

function OnClientSubmit(editor) {
    // line below causes weird flickering effect on IE when rad editor is loaded first time and navigated away
    //editor.fire("FormatStripper", { value: "AllExceptNewLines" });
}

function OnClientLoad(editor, args) {
    var style = editor.get_contentArea().style;
    style.backgroundImage = "none";
    style.backgroundColor = "e1e2dc";
    style.color = "#000";
    style.fontFamily = "Verdana";
    style.fontSize = 11 + "px";
}

[Shukhrat Nekbaev]

Hi,

I've attached a couple of screenshots where layout messes up: first screen - messed up layout, second - normal, after navigating somewhere else or F5

Thanks!

[Rumen]

Hello Shukhrat,

1) Are you able to reproduce the italic problem with the Default Example of RadEditor?
If no, could you please isolate the problem in a sample working project and send it for examination through a support ticket?
If yes, could you please provide sample content and steps to reproduce the issue?

2) I think that the flickering is due to the reloading of the page after the page is submitted. The process of page reload and the JavaScript engine is drastically optimized in IE9 and a flickering is not observed. You can see the following video for more information: http://screencast.com/t/nn1DD95h. This means that this is a problem / behavior of the older IE versions.

3) Please, try the solution provided in the following sticky note: Incorrect rendering of RadEditor when shown with AJAX in initially hidden parent. You can also fix the problem by registering the external skins of RadEditor or the CDN Skins.

Greetings,
Rumen
the Telerik team

[Shukhrat Nekbaev]

Hi,

about 1): I've found the source of the problem. For those out there using HTML5 Boilerplate, the latest update has following beginning:

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  /*font: inherit;*/
  vertical-align: baseline;
}

/*font: inherit;*/ <-- this what makes "Italic" impossible in RadEditor, comment it out if you are facing same issue.
2 Admins: you may want to handle that in future versions of the control, would be also great if you could take a look at that framework for possible underwater stones

About 2): no no, it's a different kind of flickering, I don't have IE8 anymore, but that JS line I mentioned was causing constant normal to negative colors flickering in browser on the left side having about 120px width :) I have screenshot at home. When user continues working with site - it never appears again, unless site was again reloaded as "first time". Anyway, I've commented out that line awhile, so there is no issue anymore, but I may come back to that line later, we'll see.

About 3): yeah, ok, I did that, now feels that it's working. Is it so that I will need to do same stuff with all Telerik controls facing similar issue? Only RadEditor was noticed so far in current project.

Added to masterpage's head:

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <link href='<%= Page.ClientScript.GetWebResourceUrl(typeof(RadEditor), "Telerik.Web.UI.Skins.Editor.css") %>' rel="stylesheet" type="text/css" />
        <link href='<%= Page.ClientScript.GetWebResourceUrl(typeof(RadEditor), "Telerik.Web.UI.Skins.Default.Editor.Default.css") %>' rel="stylesheet" type="text/css" />
</telerik:RadCodeBlock>

Attached: browser mode IE9 Compatibility view, you can see that first picture inside modal window has normal RadEditor look (user control displayed via "Visible" property), second image: toolbar corners are not visible (control is loaded dynamically).
They sometimes reappear and disappear. IE7 (emulation from IE9), IE8 (emulation from IE9), IE9 - all ok. Haven't checked other browsers yet.

[Rumen]

Hello Shukhrat,

Thank you for the very detailed additional information.

1) You can try to fix the problem by setting the CssFiles property as explained in the following article: Content Area Appearance Problems. By setting this property the editor will stop to pick up the styles from the page and the italic problem should disappear.

2) OK

3) I am familiar with this problem only in RadEditor when it is initially hidden and displayed with AJAX. If you experience this problem with other Telerik controls try the same workaround.

Best regards,
Rumen
the Telerik team