Editor problems continue: radEditor opens like "disabled" until I change edit mode

[İlter]

I am struggling with radEditor for about several months now, and so far, I sent several threads on this forum and created a support ticket during my demo period. As we solve problems with workarounds, problems keep coming one by one. That is just another one.

By saying "disabled", I mean that I cannot click, or write anything on the textarea even if there is text on the load of the page. When I change the edit mode to HTML (from the default Design mode) functionality restores and I can come back to Design mode and continue using the editor normally. That is very annoying for the user to change the edit mode every time they open the page that holds radEditor.

I have created a demo page where the problem can be seen clearly.
http://datepicker.akssite01.tk/akspanel/Haberler

Use the username "demo" and password "123456" for login.

When you enter, click the green "Add" labeled button and try to enter some info in the textarea of radeditor. You will see that you can't.

Also, when you click a row on the table "Edit" button appears near the Add button. When you click on it, radeditor loads with text in it, but it also doesn't appear until you change the edit mode to Html from Design mode by clicking the buttons at the bottom of the editor. When you click the edit mode changer buttons to change edit mode, editor restores its functionality and continues to work all right until the next refresh of the page.

I am not getting any js errors on the console. Using Chrome for testing, but Firefox and Opera are the same for that matter. IE is just a disaster I am keeping my distance from.

I really need help from Telerik support on this one. May be you can help us to clear our problems all at once with the help of this sample project and I can convince my manager to use your editor on our projects for good. I am willing to provide any help possible in order to solve that issue. Just let me know.

Thanks!

[Marin Bratanov]

Hi İlter,

There can be no common solution to all problems a developer will face when creating a site.
RadEditor is an extremely complex control that offers very rich functionality, yet sleek UI and rich features set always comes at a price - be it performance, resource size or having some quirks.

What I see is that the onParentNodeChanged() has been advised to reinitialize the editor here and this help article treats similar cases when the editor is placed in a popup control: http://www.telerik.com/help/aspnet-ajax/window-troubleshooting-radeditor-in-radwindow.html. Have you tried applying this approach when showing the popup? Once I used the browser console to execute it, things worked as expected on my end. I am attaching a short video that demonstrates this as a reference. The same goes for the txt_NewsContentUpd editor shown with the EDIT button.

Here is also a way to find a RadEditor whose ID you do now know with some jQuery and the way IScriptControls work in MS AJAX:

function repaintChildEditor(contentContainer /* perhaps you have a handler that gives you the popup element */) {
    var contentContainer = $(".myPopupClass");//or any other way of getting the parent element where the editor(s) is(are)
    $(".RadEditor", contentContainer).each(function (index, elem) {
        if (elem && elem.control && elem.control.onParentNodeChanged)
            elem.control.onParentNodeChanged();
    });
}

Regards,
Marin Bratanov
Telerik

[İlter]

That was exactly what I was looking for!
Thank you very much!

I want to share my solution with you. That is how I am opening my bootstrap modals without breaking radEditor now:

$('#updateNewsModal').modal({
    keyboard: false,
    backdrop: 'static',
}).on('shown.bs.modal', function () {
    $find("txt_NewsContentAdd").onParentNodeChanged();
});

And that works as needed.

Thank you again, Marin!

[İlter]

One more question.
As the solution which I posted in the previous post is working perfectly on Chrome, I realized that on IE and FireFox it breaks as if I didn't initialize any of the "OnClientCommandExecutingAdd", "OnClientLoad" and "Sys.Application.add_load" methods. I guess when I invoke the "onParentNodeChanged()" event, it reinitializes the editor and ignores all the changes these mathods are used for. How can I correctly call these methods on modal load, again?

Problems:
On IE: Editor works perfectly untill I swithc to FullScreen mode. It shows 1/4 of the screen, showing all the buttons.
On FireFox: When I switch to FullScreen mode, the model window appears on top of fullscreen radeditor.

I would appreciate if you could help me on these, too.

[Marin Bratanov]

Hello İlter,

You can attach event handlers dynamically with JavaScript, for example:

editor.add_commandExecuted(someFunction);

When resizing the RadEditor parent element you need to call the repaint() method of the editor. In case you are referring to the built-in full-screen mode - we cannot guarantee it will work properly in a bootstrap layout because it changes the page a lot. What you could do is to open a maximized RadWindow with a RadEditor inside as shown here: http://demos.telerik.com/aspnet-ajax/editor/examples/editorinradwindow/defaultcs.aspx. On the firefox issue - this is, most likely, a matter of z-index between your popup and the editor, so you should simply inspect the HTML and see what z-index each element has in order to override it so that it suits your needs (e.g., reduce the dialog's value).

Regards,
Marin Bratanov
Telerik

[Andreas]

This was exactly what i was looking for.

 

The same issue appeard using firefox and nyromodal dialog.

Opening function:

 

01.function showHtmlEditor() {
02.        $.nmManual('#Div_HtmlEditor', {
03.            closeOnEscape: false,
04.            closeOnClick: false,
05.            closeButton: false,
06.            callbacks: {
07.                afterShowCont: function () {
08.                    Editor.cleanUp();
09.                    $find("<%=Tel_HtmlEditor.ClientID %>").onParentNodeChanged();
10.                    $('#Div_HtmlEditor').show();
11.                    $.nmTop().resize(true);
12.                }
13.            }
14.        });
15.
16.        return false;
17.    }

Closing function:

 

1.function Close() {
2.    Editor.cleanUp();
3.    $('#Div_HtmlEditor').hide();
4.    $.nmTop().close();
5.    return false;
6.}

On reopening the content was empty. It was displayed again  when switching between the display modes of the editor

 

So the parentnodechange event was excactly what I had to force!

 

Thx