Opened 8 years ago
Closed 8 years ago
#16777 closed Bug (fixed)
Dragging widgets to editor doesn't work in Edge
Reported by: | lskdjfalksdjflkajsd | Owned by: | Tade0 |
---|---|---|---|
Priority: | Nice to have (we want to work on it) | Milestone: | CKEditor 4.7.0 |
Component: | UI : Widgets | Version: | 4.5.0 |
Keywords: | edge drag and drop | Cc: |
Description
Steps to reproduce
- Open http://sdk.ckeditor.com/samples/draganddrop.html with Edge
- Try to move contacts from the list on the right to editor
Expected result
When elements are being dragged over editor, cursor should not have red markings that disallow drop. And when dropped - the dragged element should be inserted to editor text.
Actual result
On Edge when dragging elements, cursor has red marker saying it cannot drop the element within editor. Dropping element anyway does nothing - the dragged element is not inserted to editor text.
Other details (browser, OS, CKEditor version, installed plugins)
Edge browser on Windows 10 64bit from official MS images (here for VirtualBox). VirtualBox run on Linux. No plugins installed, system is completely clean and run for the first time.
Attachments (1)
Change History (15)
Changed 8 years ago by
Attachment: | screen-06.gif added |
---|
comment:2 follow-up: 3 Changed 8 years ago by
@Tade0 Is it a problem with the editor or just with the sample? https://github.com/ckeditor/ckeditor-sdk/issues/196
comment:3 Changed 8 years ago by
Replying to wwalc:
@Tade0 Is it a problem with the editor or just with the sample? https://github.com/ckeditor/ckeditor-sdk/issues/196
I tried the manual test from ticket:13468(that uses the dataTransfer object) and it worked in Edge.
The native demo also works: http://html5demos.com/drag.
I think there's something special in that sample.
comment:4 Changed 8 years ago by
The native demo from html5demos.com doesn't use CKEditor and specifically doesn't drop anything not being pure text from outside of editor to its content.
Regarding the sample with contacts - there's really not too much code in it. Do you think you can fix the demo so that it works on Edge? This would prove that it's actually possible to support this kind of drag and drop with CKEditor and Edge (since other popular browsers have no problems here). It would also be a good sample for developers trying to achieve something similar in their apps.
comment:5 Changed 8 years ago by
Apparently what Edge was complaining about was the lack of a dragover
handler attached to the editable that would call preventDefault()
.
This piece:
editor.on( 'instanceReady', function() { editor.editable().on( 'dragover', function( evt ) { evt.data.preventDefault(); } ); } );
placed in the init
part of the hcard
plugin was enough to make the sample work again.
This source: https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations#droptargets confirms, that this is what should have been done, although I don't see code of this sort in CKE(or am I missing something?).
comment:6 Changed 8 years ago by
@Tade0 good finding. I can tell that dragover
is already there, however it's prevented only under certain conditions, see https://github.com/ckeditor/ckeditor-dev/blob/7a3a51194875502fd00d9e4d23d5e87557d80d34/plugins/clipboard/plugin.js#L1375-L1394
comment:7 Changed 8 years ago by
Owner: | set to Tade0 |
---|---|
Status: | confirmed → review |
Added a simple check for Edge that always calls preventDefault()
in this browser. This doesn't appear to disturb file upload like in IE.
Also added manual test inspired by the Drag & Drop sample from the SDK.
Changes pushed to branch:t/16777.
comment:8 Changed 8 years ago by
Milestone: | → CKEditor 4.7.0 |
---|
comment:9 follow-up: 10 Changed 8 years ago by
Status: | review → review_failed |
---|
When I try to drop contact into empty space inside editor (e.g. everything below the text), error is thrown:
Unable to get property 'startContainer' of undefined or null reference
There are also some issues with tests:
- Tests could be moved into
tests/plugins/clipboard
(there are already some tests for drag&drop there). - It would be nice to have unit test for that (probably tests from
tests/plugins/clipboard/drop.js
could be a source of inspiration).
I've also found that it's possible to drop contacts into the editor in SDK example if we drag the image, not the whole element. Maybe it's worth some more investigation.
comment:10 Changed 8 years ago by
Replying to t.jakut:
When I try to drop contact into empty space inside editor (e.g. everything below the text), error is thrown:
Unable to get property 'startContainer' of undefined or null reference
This part is interesting, because it's caused by invoking a native method (document.caretRangeFromPoint
) and using its result while not taking into account the fact, that this method can also return null
. Shame.
comment:11 Changed 8 years ago by
Status: | review_failed → review |
---|
Fixed errors, moved the manual test, added a unit tests that ensures that preventDefault()
is called on editable dragover in Edge.
Changes pushed to branch:t/16777.
comment:12 Changed 8 years ago by
Priority: | Normal → Nice to have (we want to work on it) |
---|
Bumping priority.
comment:13 Changed 8 years ago by
Version: | 4.6.1 → 4.5.0 |
---|
Problem can be reproduced from CKEditor 4.5.0. To be honest Edge is supported from CKEditor 4.5.2 but the problem, without any errors being thrown, can be reproduced from 4.5.0 so I will leave the earlier version.
comment:14 Changed 8 years ago by
Resolution: | → fixed |
---|---|
Status: | review → closed |
LGTM after changes, fixed with git:a7d8e4d.
Behavior for chrome, firefox and edge.