Wysiwyg-editor: IE11: Copy/paste of images does not work

Created on 27 Sep 2019  路  6Comments  路  Source: froala/wysiwyg-editor
Expected behavior.

Click on an image, press CTRL-C or CTRL-X to copy or cut. Press CTRL-V to paste it somewhere else in the Froala editor. This works in Chrome/FF.

Actual behavior.

Nothing happens when copy/cut/paste on IE11. Only selecting the image like text and then copying works.

Steps to reproduce the problem.
  1. Go to https://www.froala.com/wysiwyg-editor
  2. Click on image
  3. Copy using CTRL-C
  4. Click somewhere else in the editor
  5. Press CTRL-V
  6. Nothing happens.
Editor version.

3.0.5

OS.

Windows 10 Enterprise

Browser.

Internet Explorer 11

bug version 3
Source
picture jmiserez

Most helpful comment

_Technical notes:_
I tried fixing this issue myself, and spent quite a bit of time on it but could not get it to work correctly but I did find some things that might be useful:

  1. The first problem is that the editor loses focus. In IE, after MODULES.image._edit is called the document.activeElement is suddenly \ 
if (editor.browser.msie) {
  if (editor.popups.areVisible()) {
    editor.events.disableBlur();
  }
  if (editor.win.getSelection) {
    editor.win.getSelection().removeAllRanges();
    editor.win.getSelection().addRange(editor.doc.createRange()); // <- document.activeElement is reset to <body>, image is not selected
  }
}
  1. I added a call to reset the active element as it was before:
if (editor.$el[0].setActive) {
  editor.$el[0].setActive() // IE-specific method
}
  1. Now, something happens on copy/cut! There seems to already be a IE-specific fix in Froala in MODULES.image._init, but I think it's broken and does not work anymore:
// Fix IE copy not working when selection is collapsed.
if (editor.browser.msie) {
editor.events.on('keydown', function (e) {
  ... // omitted
  editor.events.trigger('window.copy');
  .. // omitted
  editor.events.trigger('window.cut');
  ..//
}
  1. Unfortunately , this triggers a ""Unable to get property 'type' of undefined or null reference" for e.type" in the callback just above, as e is not passed in correctly:
editor.events.on('window.cut window.copy', function (e) {
  ...// omitted
  if (e.type){ // <- ""Unable to get property 'type' of undefined or null reference"
    ..// omitted 
}
  1. Fixing this by adding the 'keydown' event as a parameter in the caller:
// Fix IE copy not working when selection is collapsed.
if (editor.browser.msie) {
editor.events.on('keydown', function (e) {
  ... // omitted
  editor.events.trigger('window.copy', [e]); // <- add e
  .. // omitted
  editor.events.trigger('window.cut', [e]); // <- add e
  ..//
}

and checking for copy/cut above:

editor.events.on('window.cut window.copy', function (e) {
  ...// omitted
           if (e.type == 'copy' || (e.type == 'keydown' && e.which == FroalaEditor.KEYCODE.C && editor.keys.ctrlKey(e))) { // <- handle 'keydown' event param
    ..// omitted 
}
  1. Now, copy/cut does not throw any errors anymore. But it also still does not work, as IE does not copy the image into the clipboard.

At this point, the problem is that the call to editor.paste.saveCopiedText works correctly (editor.win.localStorage.setItem works), but the pasting of the image does not work due to the logic in MODULES.paste.clean that checks the clipboard contents and the image is never cut/copied into the clipboard in IE 11.

I tried calling _selectImage() and document.execCommand('cut') and a few other things but it does not seem to work, IE never copied the img tag into the clipboard.

picture jmiserez on 27 Sep 2019
👍2

All 6 comments

_Technical notes:_
I tried fixing this issue myself, and spent quite a bit of time on it but could not get it to work correctly but I did find some things that might be useful:

  1. The first problem is that the editor loses focus. In IE, after MODULES.image._edit is called the document.activeElement is suddenly \ 
if (editor.browser.msie) {
  if (editor.popups.areVisible()) {
    editor.events.disableBlur();
  }
  if (editor.win.getSelection) {
    editor.win.getSelection().removeAllRanges();
    editor.win.getSelection().addRange(editor.doc.createRange()); // <- document.activeElement is reset to <body>, image is not selected
  }
}
  1. I added a call to reset the active element as it was before:
if (editor.$el[0].setActive) {
  editor.$el[0].setActive() // IE-specific method
}
  1. Now, something happens on copy/cut! There seems to already be a IE-specific fix in Froala in MODULES.image._init, but I think it's broken and does not work anymore:
// Fix IE copy not working when selection is collapsed.
if (editor.browser.msie) {
editor.events.on('keydown', function (e) {
  ... // omitted
  editor.events.trigger('window.copy');
  .. // omitted
  editor.events.trigger('window.cut');
  ..//
}
  1. Unfortunately , this triggers a ""Unable to get property 'type' of undefined or null reference" for e.type" in the callback just above, as e is not passed in correctly:
editor.events.on('window.cut window.copy', function (e) {
  ...// omitted
  if (e.type){ // <- ""Unable to get property 'type' of undefined or null reference"
    ..// omitted 
}
  1. Fixing this by adding the 'keydown' event as a parameter in the caller:
// Fix IE copy not working when selection is collapsed.
if (editor.browser.msie) {
editor.events.on('keydown', function (e) {
  ... // omitted
  editor.events.trigger('window.copy', [e]); // <- add e
  .. // omitted
  editor.events.trigger('window.cut', [e]); // <- add e
  ..//
}

and checking for copy/cut above:

editor.events.on('window.cut window.copy', function (e) {
  ...// omitted
           if (e.type == 'copy' || (e.type == 'keydown' && e.which == FroalaEditor.KEYCODE.C && editor.keys.ctrlKey(e))) { // <- handle 'keydown' event param
    ..// omitted 
}
  1. Now, copy/cut does not throw any errors anymore. But it also still does not work, as IE does not copy the image into the clipboard.

At this point, the problem is that the call to editor.paste.saveCopiedText works correctly (editor.win.localStorage.setItem works), but the pasting of the image does not work due to the logic in MODULES.paste.clean that checks the clipboard contents and the image is never cut/copied into the clipboard in IE 11.

I tried calling _selectImage() and document.execCommand('cut') and a few other things but it does not seem to work, IE never copied the img tag into the clipboard.

jmiserez picture jmiserez on 27 Sep 2019
👍2

Related when uploading images on IE11: https://github.com/froala/wysiwyg-editor/issues/3636

jmiserez picture jmiserez on 2 Dec 2019

This, among other things, is really hampering us from releasing a new product with Froala in it. A significant amount of customers use IE11, and Froala is essentially useless in that browser.

@stefanneculai @casualuser @dejanmartinovic do you have _any_ timeline on when improvements for IE11 will be put into the Froala product?

JaxonWright picture JaxonWright on 12 Mar 2020

copy event is unsupported in IE
https://developer.mozilla.org/en-US/docs/Web/API/Element/copy_event
and paste event is partly supported in IE
https://developer.mozilla.org/en-US/docs/Web/API/Element/paste_event

so in most cases paste also will not work because copy will be not triggered before it

at the moment all actual Windows system have both IE11 and Edge installed by default
we even starting to think to detect IE11 and display compatibility warning

the question is that IE11 does not support some events and basic methods
it partly solved with polyfills but that's hard to manage in Aurelia/React/Angular bundlers

casualuser picture casualuser on 3 Apr 2020

What is interesting is that you can right-click and copy in IE11 and then either right-click paste OR ctrl+v. So it clearly _can_ do this.

JaxonWright picture JaxonWright on 15 Sep 2020

@casualuser One major factor in choosing (EDIT: and commercially licensing) Froala 3 over other comparable HTML editors was and still is IE11 support.

It's your product and if you don't want to fix it because it's too hard, fine. But not fixing it just because IE11 is old or adding a compatibility warning while still advertising full IE11 support on your website is not great.

This bug has been open for nearly a year now, and I even put around a day of work into debugging the underlying issue for you, after working around several other bugs in that piece of code. It's probably possible to fix this or to add a workaround (e.g. a "copy" button), and from looking at the code it seems like this did in fact work for IE at some point.

jmiserez picture jmiserez on 15 Sep 2020
Was this page helpful?
0 / 5 - 0 ratings

Related issues

lohiaad picture lohiaad  路  4Comments
cristianst picture cristianst  路  4Comments
adilsonb picture adilsonb  路  3Comments
DerekJDev picture DerekJDev  路  3Comments
archonic picture archonic  路  4Comments