Rad Editor Not Working in IE 9

[saad]

Hello Telerik Team,
Rad Editor Not Working Design mode in IE9
but its working in HTML mode when i check in debug mode
i observe that it didnt rendering the (HTML,head,body text-area )
in its frame

<telerik:RadEditor  ExternalDialogsPath="~/UserControls/EditorDialogs/" NewLineBr="False" runat="server" ID="txtRadEditor" CssClass="emailBody RadEditorOverride"
                           SkinID="DefaultSetOfTools" Width="410" Height="435" EnableResize="false" EditModes="All"
                           ToolsFile="~/UserControls/Fippex/EditorTemplate/CustomToolFile.xml">
                           <ImageManager MaxUploadFileSize="2097152" />
                           <Content></Content>
                           <CssFiles>
                               <telerik:EditorCssFile Value="~/Style/editor.css" />
                           </CssFiles>
                       </telerik:RadEditor>

Please Help me with this out As Soon As Possible
Regards

[Rumen]

Hello Saad,

Are you able to reproduce the problem with the latest Q2 2011 SP1 version of RadControls for ASP.NET AJAX? Does the problem appear in IE8, IE7?

All the best,
Rumen
the Telerik team

[saad]

Hello ,
It Works fine in IE7 and IE8
And I m using 2011.1.315.35 version

[Dobromir]

Hi Saad,

We are not aware of such problem with the reported version of RadControls for ASP.NET AJAX and you are the first one to report it.

• Are there any JavaScript errors thrown during the loading of the page? If so, could you please provide the complete error message?
• In the provided, RadEditor declaration I noticed that you are setting some custom CSS classes to the editor. Could you try removing any custom scripts / css that are affecting the editor and see if the problem still occurs?
• Could you please provide a sample page and or a live URL reproducing the problem so we can investigate it further?

Regards,
Dobromir
the Telerik team

[Steve]

I'm getting the same issue - I see no content and don't have a text selector mouse pointer in design view, but html view works fine

No javascript errors are thown during the loading, this is only happening in IE9 (9.0.8112.16421 to be exact). If I force the page into IE8 compatability mode, it works fine

I'm using set_html to set the content. If I use alert(editor.get_html(true)); it's telling me that it has the correct content, it just isn't displaying

I'll see if I can create a publicly accessible URL which duplicates this issue

EDIT: My telerik version is 2011.2.920.35

[Steve]

I've fixed this in my project!

I had the following javascript in my page...

if ($telerik.isChrome || $telerik.isSafari ) {
    var target = prototypeJs('editorTarget');
    var editorWrapper = prototypeJs('editorWrapper');
    if (target != null) {
        target.parentNode.insertBefore(editorWrapper, target);
        target.remove();
        editor = $find("<%#  ContentEditor.ClientID %>");
        editor.onParentNodeChanged();
    }
}

... I added a check for IE9 to make it...

if ($telerik.isChrome || $telerik.isSafari || $telerik.isIE9) {
    var target = prototypeJs('editorTarget');
    var editorWrapper = prototypeJs('editorWrapper');
    if (target != null) {
        target.parentNode.insertBefore(editorWrapper, target);
        target.remove();
        editor = $find("<%#  ContentEditor.ClientID %>");
        editor.onParentNodeChanged();
    }
}

... and my editor is working fine in IE9

Hopefully this helps you find a fix Saad

[Mahesh]

i also face this type of problem and i try your code but it give me error 
Error is    "SCRIPT5009: 'prototypeJs' is undefined" 
please give some details...

[Dobromir]

Hello Mahesh,

The error message that you receive indicates that you do not have registered prototypeJs() function on the page. This is either a Steve's custom JavaScript function or a function of the Prototype JavaScript framework.

According to the code snippet posted by Steve, I believe he is moving RadEditor in the DOM tree and in such cases you need to call RadEditor's onParentNodeChanged() method. If this is not the case with your scenario, could you please describe in more details what is the exact problem on your end?

All the best,
Dobromir
the Telerik team

[-DJ-]

I get the same type of error when trying to open any manager (file manager etc) in the editor.

I traced it to this script in the master page:

<script type="text/javascript">
 var prm = Sys.WebForms.PageRequestManager.getInstance();
 var originalClientSubmit;

 if (!originalClientSubmit) {
     originalClientSubmit =Telerik.Web.UI.RadProgressManager.prototype._clientSubmitHandler;
 }

 Telerik.Web.UI.RadProgressManager.prototype._clientSubmitHandler = function(e) {
     if (!prm._postBackSettings.async) {
         originalClientSubmit.apply(this, [e]);
     }
 }
 </script>

I can't remember the exact point of this script in this project, but I'm sure it's telerik related, I'm not using any javascript libraries in there.

As far as I can tell, there are no errors in other browsers.

Regards,
-DJ-

[Steve]

HI Dobromir,

Yes this is correct, we're moving the RadEditor around in the DOM and prototypeJs is a customized version of prototype.js's $ function


Steve

[Mahesh]

Hi Dobromir,
is there any other solution for this problem?

[Dobromir]

Hello guys,

As I mentioned in my previous post, you need to call RadEditor's client-side method onParentNodeChanged() right after the editor is moved.

I will speculate over Steve's code snippet in order to explain the fix. The following two lines are used to get reference to two DOM element's

    var target = prototypeJs('editorTarget');

    var editorWrapper = prototypeJs('editorWrapper');
target is an element that is a placeholder where editor should be placed RadEditor editorWrapper is <div> element that wraps RadEditor.
These two lines -

    target.parentNode.insertBefore(editorWrapper, target);

    target.remove();

replace the placeholder with RadEditor, and this is the moment where the RadEditor is moved in the DOM tree. Right after this operation onParentNodeChanged() method is called to fix the editor.

    editor.onParentNodeChanged();

To apply this solution to your scenarios you need to locate where in your code such operation is executed and call onParentNodeChanged().

Greetings,
Dobromir
the Telerik team

[Sahil]

Hi Steve, I have implement the same javascript on my page but it did not work in IE9.

[Steve]

Dobromir: Your speculation is all correct

Sahil: Please read over Dobromir's post, part of my code is very specific to our particular application :)