RadEditor custom dialog is not working on chrome and safari

[Than Htat Aung]

Hi,

The telerik demo for radeditor custom dialogs "http://demos.telerik.com/aspnet-ajax/editor/examples/customdialogs/defaultcs.aspx" is not working on the safari and chrome browser.In detail, when "Insert special link" button is clicked, nothing happened in safari and chrome although a dialog box is displayed in firefox ,IE8,IE7.


I am currently using this technique to load my custom dialog. Is there any solution?

Best Regards,
THA

[Rumen]

Hello Than,

I tested the demo but I was unable to reproduce the problem. You can see my test at: http://screencast.com/t/wFxEQItVnyo.
Am I missing some step?

Please, make sure that you are using the latest versions of Chrome and Safari.


Best wishes,
Rumen
the Telerik team

[Than Htat Aung]

Hi,

Sorry about that i did not describe in detail.
The scenario is that I even don't select any text and click inside the radeditor.
As soon as the page is finished loading , I clicked that button from the radeditor as the first action.

The dialog cannot be loaded in safari and chrome.

[Rumen]

Hello Than,

I debugged the problem and found that it is due to the following error:

Uncaught TypeError: Cannot read property 'tagName' of null

When calling the custom link manager you should notify your users that a selection is needed inside the content area, e.g.

<script type="text/javascript">
 Telerik.Web.UI.Editor.CommandList["InsertSpecialLink"] = function (commandName, editor, args) {
 var elem = editor.getSelectedElement(); //returns the selected element.
 if (elem == null) {
 alert("Please, make selection in the content area.");
 }
 else if (elem.tagName.toUpperCase() == "A") {
 editor.selectElement(elem);
 argument = elem;
 }
...

Please, note that the Custom Link Manager is just a demo, but not a complete solution as the built-in LinkManager of RadEditor.

Sincerely yours,
Rumen
the Telerik team

[-DJ-]

Hi,

I am dealing with the same problem basically.
I've replaced the image manager with my own dialog, and I get the "Uncaught TypeError: Cannot read property 'tagName' of null" error if the user hasn't placed his cursor in the editor before clicking the custom dialog button.

However, instead of telling the user to do so, I would prefer to simply set the focus to the editor and let the user get on with his work.

For some reason, this doesn't seem to be sufficient:

if (elem == null) {
var editor = $find("<%=RadEditor2.ClientID%>"); //get a reference to RadEditor client object
editor.setFocus(); //set the focus on the the editor
}

Any thoughts?

Regards,
-DJ-

[-DJ-]

I managed to fix this, here is the code if anyone needs it

// image manager
Telerik.Web.UI.Editor.CommandList["YourDialog"] = function (commandName, editor, args) {


    if (editor.getSelectedElement() == null) {
        var editor = $find("<%=RadEditor2.ClientID%>"); //get a reference to RadEditor client object
        editor.setFocus(); //set the focus on the the editor
        argument = null;
    }
    else {
        var elem = editor.getSelectedElement(); //returns the selected element.
        if (elem.tagName == "img") {
            editor.selectElement(elem);
            argument = elem;
        }
        else {
            //remove links if present from the current selection - because of JS error thrown in IE
            editor.fire("Unlink");


            //remove Unlink command from the undo/redo list
            var commandsManager = editor.get_commandsManager();
            var commandIndex = commandsManager.getCommandsToUndo().length - 1;
            commandsManager.removeCommandAt(commandIndex);

            var content = editor.getSelectionHtml();

            var link = editor.get_document().createElement("img");

            argument = link;
        }
    }

    var myCallbackFunction = function (sender, args) {
        editor.pasteHtml(String.format("<img src={0} />", args))
    }

    //showExternalDialog(url (aspx/html file), argument, width, height, callbackFunction, callbackArgs, title, modal, behaviors, showStatusbar, showTitlebar);
    editor.showExternalDialog(
        'YourUrl',
        argument,
        600,
        600,
        myCallbackFunction,
        null,
        'Image Manager',
        true,
        Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move,
        false,
        true);
};