Inserted Image Cursor Location

[Romi]

Hi,

We have a custom image upload control to insert images into the editor. The control is launched by the user clicking the image icon on the Prometheus Rad editor toolbar.

The issue we are running into with Internet Explorer is that the image is always inserted at the beginning of the editor content. The expected behavior is for the image to be inserted at the cursor location prior to the user clicking the image insert button on the Rad editor toolbar. Please note that this works as expected in Firefox and the image is inserted at the current cursor position.

We are inserting the image html via a callback function after calling a web service. Below is the callback function that does the image insert: 

        function OnWSRequestComplete(results)
        {
            // Clean up session variable
            var b = '<%= Context.Session["SessionID"] = 
            Session.SessionID %>';

            var editor = $find('ctl00_ctl00_ContentPlaceHolder1_ContentArea_SectionContentEditor_SectionEditor'); //get a reference to the editor

            editor.pasteHtml(results[1]);

            HideUploadControl('SectionUploadControlWindow');
        }

Please advise as to what we need to do to make sure the image is inserted at the current cursor position in IE as well.

[Tervel]

Hello Romi,

Some event causes the focus to move away from the editor's content area somewhere else.

This event could be related to the AJAX / WebService call, or it could be the very fact that the user is clicking into your custom image upload control (if it is a part of the same page). For example, editor dialogs handle this situation automatically. If you implement your image upload control to be a custom RadEditor dialog, then the problem will disappear.

Here is an example of creating a custom editor dialog:
http://www.telerik.com/demos/aspnet/prometheus/Editor/Examples/CustomDialogs/DefaultCS.aspx

In case you definitely need to have the image upload control as a part of the same page, then you would need extra javascript - to create a range, and then to restore it. Here is some sample code:

//Create a range, before working with the Image Upload control
var

currentRange = this.getSelection().getRange();

//Restore the range before calling pasteHtml
editor.getSelection().selectRange(currentRange);

Best regards,
Tervel
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center