This is a migrated thread and some comments may be shown as answers.

Drag & Drop operations doesn't work in IE11 Edge mode

5 Answers 302 Views

Editor

This is a migrated thread and some comments may be shown as answers.

5 Answers, 1 is accepted

answered on 15 Nov 2013, 02:32 PM

EditableIFRAME.zip

Hello Erik,

Thank you for your report.

The dragging of elements into an editable iframe is a browser provided functionality, which seems not to be supported for the moment in IE11. Since the RadEditor's content area is an editable iframe, you are experiencing the same browser behavior. Once the browser provide this functionality it would be also available in the RadEditor control.

For your convenience I am attaching a sample editable iframe when you can reproduce the issue on your side - video.

Regards,
Veselina Raykova
Telerik

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.

answered on 18 Nov 2013, 07:22 AM

Hello Veselina,

I have playing with your example, and found that IE11 sets the editable iframe in Quirks mode. If you change the docType to html5 and force Edge mode via X-UA-Compatible meta tag both in the main document and the Iframe document. Then the drag drop example starts to work in IE 11 Edge mode! I'm guessing this is an security issue in IE11 that the main document is using Edge, but the IFrame document is using Quirks and the two zones can't communicate with each other.

Another benefit when the Iframe document is forced into edge mode is that IE can use its latest CSS-standards in design mode!

I hope this example can help your team to make the rad editor working in IE11 Edge mode!

Se example below:

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

<title>IFRAME test</title>

</head>

<body onload="SetEditable()">

<b>Drag this image to the IFRAME below:</b><br />

<img id="img1" src="Jellyfish.jpg" width="100" height="100" /><br />

<b>Editable IFRAME element:</b>

<br />

<iframe src="javascript:void(0)" id="editor" style="width: 774px; height: 489px;

border: 3px solid red;"></iframe>

<script type="text/javascript">

var editor1 = document.getElementById("editor"); //reference to the IFRAME element

var htmlArea1 = document.getElementById("htmlArea"); //reference to the HTML area in which we put the content

var htmlMode = document.getElementById("htmlMode"); //reference to the HTML area that displays the IFRAME content

var oDocument = editor1.contentWindow.document;

var doctypeStr = "<!DOCTYPE html>";

var sMarkup = doctypeStr + "<html><head><meta http-equiv='X-UA-Compatible' content='IE=Edge'><title>New Document</title></head>" +

"<body style='overflow:scroll;margin:0px;padding:0px;height:100%'>" +

"</body></html>";

function SetEditable() {

oDocument.open();

oDocument.write(sMarkup);

oDocument.close();

oDocument["designMode"] = "on";

}

</script>

</body>

</html>

answered on 10 Jan 2014, 07:07 AM

Hi

I finally got some time to investigate this issue further.

I have been able to debug the javascript code in radeditor and I have found what is causing IE 11 to disable drag drop operations.

I found this line in telerik asp.net ajax source code RadEditor.js:

_onDragStart: function(e)

{

var doc = this.get_contentWindow().document;

//This is why IE11 drag drop operations is disabled. IE11 has removed document.selection!!!!

if ($telerik.isIE && !doc.selection) {

return $telerik.cancelRawEvent(e);

};

......

Because IE11 hase removed deprecated document.selection telerik will cancel the raw event.
More info about removed legacy features in IE11 can be found here: http://msdn.microsoft.com/en-us/library/ie/bg182625(v=vs.85).aspx#legacyAPIs

Hope this can help the Rad Editor Team to fix ie11 issues.

answered on 14 Jan 2014, 04:45 PM

Hi Erik,

Thank you for the time spared in investigating the case. Indeed the document.selection is deprecated and we should handle its use. Unfortunately, since we are not able to reproduce the issue anymore on our side we could not provide much assistance on the case. Could you try isolating the issue into a sample fully runnable project and send it in case we are missing a specific configuration?

The dragStart event, though, is fired when an image is dragged into or outside the editor but not vise versa so it should not be connected with the experienced issue. Nevertheless, you can try overriding the dragStart handler in a following way and see whether it will fix the problem on your side:

<script>

var $ = $telerik.$;

var $T = Telerik.Web.UI;

Telerik.Web.UI.RadEditor.prototype._onDragStart = function (e)

{

var doc = this.get_contentWindow().document;

//if ($telerik.isIE && !doc.selection) {

// return $telerik.cancelRawEvent(e);

//};

...

this._startRange = null;

if (!e.ctrlKey && !e.ctrlLeft)

{

this._startRange = doc.body.createTextRange();//doc.selection.createRange();

...

}

</script>

Kind regards,
Veselina Raykova
Telerik

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Drag & Drop operations doesn't work in IE11 Edge mode

5 Answers, 1 is accepted