TinyMCE copy paste IE11

Question

I'm working on a rich text with TinyMCE 4.3.9 and I'm in trouble with the plugin paste that has a strange behavior for IE 11.

The case is a copy e paste from word, in chrome is working fine but with ie11 isn't retain the indentation of bullet list.

I attached a file for testing on the main site

The file is at https://github.com/tinymce/tinymce/issues/4949

please provide a minimal reproducible example in a more simple-to-setup environment (and less fragile to link changes in the future). The demo page you've referenced has a link to Codepen (here's a saved pen: codepen.io/anon/pen/eoovKE?&editable=true), so you can create your own with your file. Ideally, once you reproduce the problem there, create an SO snippet here and describe in more detail how to reproduce the issue, the expected and the actual behavior and what you have tried so far to fix it. For now, it's unclear what do you mean by The case is a copy e paste from word — YakovL

Michael Fromin Michael Fromin · Accepted Answer · 2019-04-30T19:35:50

When you copy and paste a document from Word there are two steps that happen. In the first step, when you copy the content in Word (e.g. CMD + C), it creates multiple "flavors" of that content in the clipboard. On Windows and Mac machines this typically includes Plain Text, RTF, and HTML among others.

When you paste the content into TinyMCE, the editor is not looking at the original Word document (it actually can't do that) - instead it looks at the clipboard and finds the most appropriate representation of the content. TinyMCE will always choose HTML given the fact that TinyMCE is an HTML editor.

The interesting part of this is that Microsoft's browsers can (and almost always do) modify the content when it is requested from the clipboard before it is handed to the editor for processing. The reason Chrome and IE behave differently is that they are likely returning very different HTML to the editor as the starting point for the paste process.

If you are curious what the browsers are returning here are some test pages that will allow you to see the differences:

http://static.ephox.com/clipboard/clipboardtest.html (browsers not named IE11 or MS Edge)

http://static.ephox.com/clipboard/clipboardtestms.html (IE11 and MS Edge)

Hopefully this helps explain why things would look different between the two browsers. If you believe the HTML that IE returns from the clipboard does indeed have the needed data to get the indentation correct I would follow up in the GitHub Issue you opened with more details on what you find.

TinyMCE copy paste IE11

2 Answers