Uploaded image for project: 'Sakai'
  1. Sakai
  2. SAK-41702

Pasting content from Google Docs to ckeditor breaks text formatting

    XMLWordPrintable

    Details

    • Type: Bug
    • Status: OPEN
    • Priority: Major
    • Resolution: Unresolved
    • Affects Version/s: 20.0
    • Fix Version/s: None
    • Labels:
      None
    • Test Plan:
      Hide
      1. create a document in google docs
      2. give your document's text various styles. e.g. headings, bold, italics, color, bulleted lists, links (https://docs.google.com/document/d/17P-La25uuCWorNrVeCDiBEEV5R2kwYXYvGu9hVgH3-w/edit?usp=sharing)
      3. select the text from google docs and copy it
      4. paste it into Sakai's ckeditor

      ensure that the text formatting is pasted into ckeditor

      Show
      create a document in google docs give your document's text various styles. e.g. headings, bold, italics, color, bulleted lists, links ( https://docs.google.com/document/d/17P-La25uuCWorNrVeCDiBEEV5R2kwYXYvGu9hVgH3-w/edit?usp=sharing ) select the text from google docs and copy it paste it into Sakai's ckeditor ensure that the text formatting is pasted into ckeditor

      Description

      Please see this forum discussion for details:
      https://groups.google.com/a/apereo.org/forum/#!topic/sakai-dev/7b27ElHP6wM

      This problem looks worse in Chrome and Safari where there are google labeled <strong> tags on everything.

      It's looks ok if you paste to Firefox or Edge, but if you inspect the source code, it retains google docs' <strong> tags. Firefox adds style to override that to make it normal weight again, but it's unclear if the presence of the <strong> tags will confuse screen readers for ADA

      Another workaround is to paste the text into MS Word (or e.g. OpenOffice) first, then copy/paste from there to Sakai's CKEditor. However, while that fixes the issue with the <strong> tags, it may also shrink the font weight. It may also strip out heading tags and replace them with similarly sized font size style, which will look ok to most users, but again, that could trip up screen readers for ADA.

      There are a couple of ckeditor plugins that could help with this

      https://ckeditor.com/cke4/addon/pasteFromGoogleDoc
      https://ckeditor.com/cke4/addon/googleDocPastePlugin

      but it would be best if the ckeditor folks had a permanent solution... Or if Google Docs didn't add unexpected code to their docs.

        Gliffy Diagrams

          Zeplin

            Attachments

              Issue Links

                Activity

                  People

                  • Assignee:
                    Unassigned
                    Reporter:
                    austinUH Austin
                  • Votes:
                    3 Vote for this issue
                    Watchers:
                    6 Start watching this issue

                    Dates

                    • Created:
                      Updated:

                      Git Integration