Ckeditor4: Paste from Google docs

Created on 29 Aug 2017 · 23Comments · Source: ckeditor/ckeditor4

Are you reporting a feature request or a bug?

New feature

Check if the issue is already reported

https://dev.ckeditor.com/ticket/13877

Provide detailed reproduction steps (if any)

Open this Google doc
Highlight all content
Paste into a CKEditor instance

Expected result

The content is pasted with formatting resembling the original

Actual result

The content is entirely bold

Other details

Browser: Safari 10.1.2 (12603.3.8)
OS: macOS 10.12.6 (16G29)
CKEditor version: 4.7.2
Installed CKEditor plugins: Basic preset

clipboard confirmed major feature

Source

mark-wade

👍3

Most helpful comment

@f1ames glad to know it's really being looked into, we use it for article/review/interview collaboration and then pasting it into CKEditor only causes frustration.

When you say the next "major" release, I assume we're still talking CKEditor 4 right?

LiamDawe on 26 Jun 2019

👍2

All 23 comments

There is an old issue on our tracker for this (I've updated this ticket to include the reference).

Comandeer on 29 Aug 2017

We need to check what's produced by gdocs, if it's putting some garbage markup (don't have the time to check the history now) then this is a feature request rather than bug.

mlewand on 29 Aug 2017

Unfortunately Google produces some garbage markup. :(
I've made test for simple "Hello world" text.
Webkits are surrounded with some kind of  tag.

Safari:

<meta charset="utf-8"><b style="font-weight:normal;" id="docs-internal-guid-02e80b59-3772-4a14-1d46-472ecba47538"><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Hello world.</span></p></b><br class="Apple-interchange-newline">

Chrome:

<meta charset='utf-8'><meta charset="utf-8"><b style="font-weight:normal;" id="docs-internal-guid-864f78f7-375f-e1b4-0491-fcf5da1d9a1c"><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Hello world.</span></p></b><br class="Apple-interchange-newline">

Firefox - no visible problems (there is no  tag)

<meta charset="utf-8"><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;" id="docs-internal-guid-722791a9-3773-3755-c587-cf39a76aa97f"><span style="font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;">Hello world.</span></p>

Edge 15

Version:1.0
StartHTML:000000174
EndHTML:000000848
StartFragment:000000432
EndFragment:000000816
StartSelection:000000432
EndSelection:000000816
SourceURL:about:blank
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD></HEAD><BODY role="textbox" style="background-color: transparent;" contenteditable="true" spellcheck="false" aria-label="TreÅ›Ä‡ dokumentu" aria-multiline="true"><!--StartFragment--><B style="font-weight:normal"><P id="docs-internal-guid-41ef99cb-377b-156f-8619-7da7f2003f16" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;" dir="ltr"><SPAN style="font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;">Hello world.</SPAN></P><BR></B><!--EndFragment--></BODY></HTML>

IE11

<b style="font-weight: normal;"><p id="docs-internal-guid-a3025ab9-377d-4708-ce9d-c9d945370da4" style="line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;" dir="ltr"><span style="color: rgb(0, 0, 0); font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; background-color: transparent;">Hello world.</span></p><br></b>

msamsel on 31 Aug 2017

So that makes it a feature request, I'll update report accordingly.

Now the question is if we filter out this garbage outer bold, does it fix pasting?

mlewand on 31 Aug 2017

When adding handling for gdocs, I believe we should do it in a dedicated plugin. I can see that it would be beneficial, so I'm for putting it in full and standard preset by default.

mlewand on 31 Aug 2017

Now the question is if we filter out this garbage outer bold, does it fix pasting?

Yes, it fixes it. The partial solution is available in https://github.com/cksource/ckeditor-dev/tree/t/13877 – it could be a good base for the new, dedicated plugin.

Comandeer on 31 Aug 2017

👍1

Yep it fixes it.
But processing this markup will require some work, similar to PFW plugin. So dedicated plugin sounds nice for it.
Example of markup when I add some inline styles to it.
<meta charset='utf-8'><meta charset="utf-8"><span style="font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">H<span style="font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:italic;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">e<span style="font-size:11pt;font-family:Arial;color:#ff0000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">ll<span style="font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">o w<span style="font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:underline;vertical-align:baseline;white-space:pre-wrap;">o<span style="font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:underline;vertical-align:baseline;white-space:pre-wrap;">rl<span style="font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">d.<ul style="margin-top:0pt;margin-bottom:0pt;"><li dir="ltr" style="list-style-type:disc;font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;"><span style="font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">123</li></ul>

From curiosity I added some bold to text to check how it behave in such case, google add style font-weight:700; instead of using strong or b tags

msamsel on 31 Aug 2017

👍2

wondering if there's already a dedicated plugin for this? how would i solve this without switching to the specific branch?

nabilzhafri on 17 Nov 2017

Any movement on this? It's such a hassle :(

LiamDawe on 13 Jun 2018

@LiamDawe just sharing my solution, I ended up using the plugin from here: https://ckeditor.com/cke4/addon/pasteFromGoogleDoc, where I believe they extract the code and moved it to a plugin.

nabilzhafri on 22 Jun 2018

👍1

Thanks, that does seem to make it a little more bearable.

LiamDawe on 22 Jun 2018

In fact, sadly, that plugin seems to mess with others. In particular, it seems to stop the Youtube plugin from loading somehow?

LiamDawe on 22 Jun 2018

I don't understand how this is a feature request. Pasting from Google Docs in the most popular browser is broken. This should be a bug.

frob on 5 Dec 2018

👍1

It is not working with ckeditor version "4.11.1".
Text pasted from GoogleDocs is displayed in bold. User cannot change font-weight using controls.
Can this be prioritized ? And converted from feature request to bug ?

remigasas on 5 Apr 2019

👍1

Reproduced.

This is probably caused by Google Docs' weird markup but … it is a _very_ widely used text editor, and it is very often where collaboration happens prior to content being moved into a CMS. It seems that the simplicity of the fix plus the far-reaching impact together should make this a high priority?

In any case, it is marked as a major bug in Drupal 8, and we rely on CKEditor to fix it: https://www.drupal.org/project/drupal/issues/2948171

wimleers on 25 Jun 2019

Paste from Google docs support is targeted for the next major release and we are determined to ship it so stay tuned ;)

The fix for bold is rather easy, but still there is more markup which needs explicit support and proper transformations. Additionally, we are doing a significant refactor to reuse some common content filters introduced for pasting from Word.

f1ames on 26 Jun 2019

Confirm that the issue still exists.

@f1ames thanks for the update and all your work.

nkgokul on 26 Jun 2019

@f1ames glad to know it's really being looked into, we use it for article/review/interview collaboration and then pasting it into CKEditor only causes frustration.

When you say the next "major" release, I assume we're still talking CKEditor 4 right?

LiamDawe on 26 Jun 2019

👍2

When you say the next "major" release, I assume we're still talking CKEditor 4 right?

@LiamDawe, yes it will be CKEditor 4 4.13 version.

f1ames on 26 Jun 2019

I think this is a really bad bug.
This should definitely be prioritized.
Our team gets really irritated by this behavior and they have to update the styling every time they paste from google docs which is actually all the time.
Any date for the release of version 4.13
Would be really helpful.

mechanicals on 13 Aug 2019

Use the pasteFromGoogleDoc plugin mentioned above for the moment. That's what I do and working fine.

knu on 13 Aug 2019

👍1

We are aware of the importance of the issue and already working on it. Take a look at https://github.com/ckeditor/ckeditor-dev/pull/3257 for more information.

jacekbogdanski on 13 Aug 2019

👍1

@mechanicals: CKEditor 4.13 is scheduled for the end of September. You can see the milestone here: https://github.com/ckeditor/ckeditor-dev/milestone/23

Sorry about any inconvenience caused - we're doing our best to have a proper solution for all Google Docs pasting issues.