RadEditor iframe not displaying content in FF

[vishal]

Hi all

First of all thanks Rumen for replying to my previous post. I am having to face another issue. I have a radeditor in a partial MVC view(ascx), that is loaded through a controller action as a partialView on a razor view(.cshml) through an Ajax call. So basically, the ajax call returns the partialview(whcih is the editor) and renders it on the page. The issue is that it works fine in IE but not in FF. In FF, the iFrame that is used to display the content is hidden. Also, the content area is not even clickable. Due to some constraints, I have to use the Ajax RadEditor with MVC. I have seen this link
http://www.telerik.com/community/forums/aspnet-ajax/editor/radeditor-doesn-t-show-hidden-fields-in-designe-mode.aspx
but it does not resolve my problem, also looked at
http://www.telerik.com/support/kb/aspnet-ajax/editor/radeditor-content-not-saved-after-ajax-update-in-firefox-google-chrome-and-safari.aspx
but all the solutions provided here are for webforms, there is no mention for MVC views which makes sense since this editor is not intended to use with MVC, but in my case, I really need that. Any help appreciated.
Thanks
Vishal

[Rumen]

Hi Vishal,

You can examine the following project radeditorinpartialview.zip which could be helpful for your scenario.

What it is important to know about it is that

1) the RegisterWithScriptManager property is to "false" in the RadEditor declaration in the \Views\Home\PartialEditor.ascx file.
2) and the MicrosoftAjax.js file is manually imported with a script tag:

<script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>

in the \Views\Shared\Site.Master master page.

Best regards,
Rumen
the Telerik team

[vishal]

Hi Rumen

I am already doing both these things in my project. I am attaching a sample project which is basically a modification of your project to explain my issues. So when you run this project, you will basically see 2 isuses.
1 - Running it in FF makes the editor un-editable, I cannot click in the content area.
2 - If you look at line 11 of PartialEditor.ascx, where its doing a editorHidden.get_html(), that's not giving me the right content, it comes up blank every time. Basically what I am trying to do is "have one version of editor move in the DOM using a partial" as the different div's are clicked. I am not sure why its coming out to be blank given that I am typing content in my editor.
RadEditorInPartialViewWithAjax
Any help appreciated.

Thanks
Vishal

[Rumen]

Hi,

You can fix the problem by calling the following function in the OnClientLoad event of RadEditor:

    ...
      function OnClientLoad(editor) {

        setTimeout(function () { editor.onParentNodeChanged(); }, 0);

    }

 </script>

<telerik:RadEditor OnClientLoad="OnClientLoad" ID="RadEditor2" Runat="server" RegisterWithScriptManager="false" />

Kind regards,
Rumen
the Telerik team

[vishal]

Hi Rumen

Thanks for the reply, that solves a part of my problem, now the editor is click able in FF, however the other part of the problem still lies, the content is not being retrieved properly, any advice on that?

Thanks
Vishal

[Rumen]

Hi Vishal,

Just increase the timeout as shown in the following video:
http://screencast.com/t/8VSpi25ulaA

Kind regards,
Rumen
the Telerik team

[vishal]

Hi Rumen

Thanks for the reply, but increasing the timeout does not help either. In the video you have shown, please observe that when you toggle between div's after the first time, they do not retrieve the content, each and every time I toggle from one div to another, I still loose the content inside the div.

There are 3 more concerns I have.
1 - As you can see in the javascript, I am trying to set the height of the editor based on the div in which it needs to open. This is not working.
2 - I am trying to use the ToolBarMode="ShowOnFocus" on the editor, works fine in FF, but in IE, I am not able to see the toolbar at all.
3 - There is a javascript error on the page whenever reloads "c.ParentNode" is null. Its inside editor code somewhere but is causing issues, especially on IE where it hangs up when try to reload the page.

Thanks
Vishal

[vishal]

Hi Rumen

Any comments on the above problems? Any help appreciated please.

Thanks
Vishal

[Rumen]

Hello Vishal,

The ShowOnFocus problem is fixed in the current beta release and will not exist in the official Q1 2012 build scheduled for mid February.

If you want to edit the contents of some div elements on the page, my suggestion is to try the solution provided in the following help article: Setting hidden RadEditor in edit mode on click and putting it in non editable mode onblur.


Best regards,
Rumen
the Telerik team

[vishal]

Hello Rumen

Thanks for the reply. I cannot use the above suggested implementation since I need to visually shift the editor between different div's on the page when clicked on them, so its not just modifying but literally shifting the editor on the page between different sections. For that reason, I am making ajax call to load the editor inside a partial whenever a div element is clicked. It's working fine as expected but I am having some issues that I needed your advice on:
1 - Each and every time the editor is rendered, its height is always 400px. I am setting the height and width through javascript dynamically for each ajax call, the width is set properly in FF but not in IE and the height is not set in both the browsers. I am using this snippet
   
 var editor = $find("<%= Editor.ClientID %>");
 $editor = $('#' + editor.get_id());
var divHeight = '200px';
var divWidth = '400px';
 //Set editors height and width to the target div.
 $editor.css('height', divHeight);
 $editor.css('width', divWidth);
2 - The onBlur is not firing at all, I added using the below snippet in OnClientLoad(), but it does not seem to fire. Again, this is set on the OnClientLoad() of the editor that I get through an ajax call.
var element = document.all ? editor.get_document().body : editor.get_document();
        $telerik.addExternalHandler(element, "blur", function(e)
        {            
            alert('but not here...');
        });
3 - For the same editor(received through ajax call), I am unable to set ImageManager and SlideShow Properties. For ex, I do set Editor.ImageManager.UploadPaths = new string[]{"/MyPath"}
but when I open the image manager for this editor, it comes out disabled since there is no upload path set. If however, I include <telerik:ImageManager UploadPath="/MyPath"> inside <telerik:RadEditor>, it works. But since I need to set the paths dynamically, I need it working the former way.

Below is what my partial(that I have mentioned for above issues) for editor looks like. This is the partial I receive after making an ajax call for the editor. Model.WidgetEditor.UploadPath is
<%
//Editor editor initialize
    Editor.EnableFilter(Telerik.Web.UI.EditorFilters.RemoveScripts);
    Editor.EnableFilter(Telerik.Web.UI.EditorFilters.MakeUrlsAbsolute);
    Editor.DisableFilter(Telerik.Web.UI.EditorFilters.FixUlBoldItalic);
    Editor.EnableFilter(Telerik.Web.UI.EditorFilters.FixEnclosingP);
    Editor.DisableFilter(Telerik.Web.UI.EditorFilters.IECleanAnchors);
    Editor.DisableFilter(Telerik.Web.UI.EditorFilters.MozEmStrong);
    Editor.EnableFilter(Telerik.Web.UI.EditorFilters.ConvertFontToSpan);
    Editor.DisableFilter(Telerik.Web.UI.EditorFilters.ConvertToXhtml);
    Editor.EnableFilter(Telerik.Web.UI.EditorFilters.IndentHTMLContent);    
    Editor.CssFiles.Add("/images/pages/styleAdmin.css");

    Editor.ImageManager.ViewPaths = new string[] { "/MyPath" };
    Editor.ImageManager.UploadPaths = new string[] { "/MyPath" };
    Editor.ImageManager.DeletePaths = new string[] { "/MyPath" };
    Editor.ImageManager.MaxUploadFileSize = CivicPlus.CMS.Library.Common.Utilities.ConfigurationHelper.MaxUploadFileSize;
    Editor.ImageManager.SearchPatterns = CivicPlus.CMS.Library.Common.Utilities.ConfigurationHelper.SearchPatternsImages;

    Editor.FlashManager.ViewPaths = new string[] { "/MyPath" };
    Editor.FlashManager.UploadPaths = new string[] { "/MyPath" };
    Editor.FlashManager.DeletePaths = new string[] { "/MyPath" };
    Editor.FlashManager.MaxUploadFileSize = CivicPlus.CMS.Library.Common.Utilities.ConfigurationHelper.MaxUploadMediaFileSize;
    Editor.FlashManager.SearchPatterns = CivicPlus.CMS.Library.Common.Utilities.ConfigurationHelper.SearchPatternsFlash;

    Editor.MediaManager.ViewPaths = new string[] { "/MyPath" };
    Editor.MediaManager.UploadPaths = new string[] { "/MyPath" };
    Editor.MediaManager.DeletePaths = new string[] { "/MyPath" };
    Editor.MediaManager.MaxUploadFileSize = CivicPlus.CMS.Library.Common.Utilities.ConfigurationHelper.MaxUploadMediaFileSize;
    Editor.MediaManager.SearchPatterns = CivicPlus.CMS.Library.Common.Utilities.ConfigurationHelper.SearchPatternsMedia;

    Editor.SlideShowManager.ViewPaths = new string[] { "/MyPath" };
    Editor.SlideShowManager.UploadPaths = new string[] { "/MyPath" };
    Editor.SlideShowManager.DeletePaths = new string[] { "/MyPath" };
    Editor.SlideShowManager.MaxUploadFileSize = CivicPlus.CMS.Library.Common.Utilities.ConfigurationHelper.MaxUploadFileSize;
    Editor.SlideShowManager.SearchPatterns = CivicPlus.CMS.Library.Common.Utilities.ConfigurationHelper.SearchPatternsImages; %>
<div style="display:none;">
<telerik:RadEditor ID="Editor" EditModes="Design" AutoResizeHeight="true" AutoResizeWidth="true" Runat="server" RegisterWithScriptManager="false" ToolsFile="/Common/EditorConfigFiles/fullEditor.xml" />    </telerik:RadEditor>
</div>

Please advice on these, I am really stuck with these issues.
Thanks and Regards
Vishal

[Rumen]

Hi,

Straight to the points:
1) To set the RadEditor's size on the client you should use its client-side setSize method.
2) If you call the editor.onParentNodeChanged();  method to recreate the RadEditor's iframe after the Ajax request you should know that the attached events to the iframe are erased. That is why you should reattach the events after firing the onParentNodeChanged method, e.g.

...
editor.onParentNodeChanged();
attachBlurHandler(editor);
...

 function attachBlurHandler(editor) {
            var element = document.all ? editor.get_document().body : editor.get_document();
            $telerik.addExternalHandler(element, "click", function (e) {
                alert('You just clicked in the editor');
            });
}

3) You can set the paths dynamically in the Page_Load event, e.g.

Copy Code

<script type="text/C#" runat="server">
protected void Page_Load(object sender, EventArgs e)
{
string[] imagepath = { "~/Images" };
RadEditor1.ImageManager.UploadPaths = imagepath;
RadEditor1.ImageManager.ViewPaths = imagepath;
RadEditor1.ImageManager.DeletePaths = imagepath;
RadEditor1.DocumentManager.ViewPaths = imagepath;
RadEditor1.DocumentManager.UploadPaths = imagepath;
}
</script>
<telerik:RadEditor ID="RadEditor1" runat="server"></telerik:RadEditor>

Kind regards,
Rumen
the Telerik team

[vishal]

Hi Rumen
There is one more issue with the editor that I have been trying to find a solution for. It is a Telerik issue since I can reproduce it on one of your sample projects. The issue is as follows

I have implemented the editor code on the idea of solution 2 provided in this article.

http://www.telerik.com/support/kb/aspnet-ajax/editor/setting-hidden-radeditor-in-edit-mode-on-click-and-putting-it-in-non-editable-mode-onblur.aspx

The code works fine, but for IE, there is a height issue which can be reproduced using the following steps.

1. Unzip the project->run it-> go to /Home/Editor2
2. Double click on one of the divs, add a large content(large amount of text), save it.
3. Double click on the div again and remove some significant content(text) and leave a little bit in there, save it.

Double click on the div again. Notice the height of the editor, it does not adjust acc. to the content(although there is code present to do that). The reason being that for some reason, the min-height on the “RadEditor Outlook reWrapper” element is not changing dynamically.
Also, just for FF, if you scroll the page(when its scrollable) and then click on a div element, click on the Apply CSS class on the toolbar, the drop down's position is messed up, this only occurs in FF. Works fine in IE and Chrome.
Please guide.
Regards
Vishal

[Rumen]

Hi,

The KB article does not include a sample project and I am not sure which project you are exactly referring to. Yes, the min-height of the RadEditor's wrapper is not changed dynamically, but you can set it to 0px using the following CSS class:

.reWrapper{    min-height: 1px !important;  } 

If you need further assistance, please, open a support ticket and provide a simple working project that works and uses the latest Q1 2012 version of RadEditor.


Kind regards,
Rumen
the Telerik team