Opened 5 years ago

Closed 5 years ago

Last modified 5 years ago

#13336 closed Bug (invalid)

Formatting lost when pasting rich text - text is black on black

Reported by: Dan Dascalescu Owned by:
Priority: Normal Milestone:
Component: Core : Pasting Version:
Keywords: Cc:

Description

When pasting the first code block from http://addyosmani.com/resources/essentialjsdesignpatterns/book/#summarytabledesignpatterns plus some text around it, CKEditor displays black on black text.

Many other editors have this problem, e.g. https://github.com/froala/wysiwyg-editor/issues/552. But some others don't - http://summernote.org.

Attachments (3)

CKeditor rich text paste formatting loss.png (90.6 KB) - added by Dan Dascalescu 5 years ago.
Formatting lost after pasting - text is black on black
summernote.png (84.6 KB) - added by Jakub Ś 5 years ago.
HTML from Chrome.txt (52.5 KB) - added by Jakub Ś 5 years ago.

Download all attachments as: .zip

Change History (7)

Changed 5 years ago by Dan Dascalescu

Formatting lost after pasting - text is black on black

comment:1 Changed 5 years ago by Jakub Ś

Resolution: invalid
Status: newclosed

This is happening in Blink while in other browsers like FF or IE, text on white background is pasted. Some of the CSS classes are removed while others are left. This can be worked around with proper ACF settings but that is not the source of the problem.

The source of the problem is that you are pasting HTML elements which hold names of CSS classes but not the classes because they are defined in external file. There is no way to copy HTML and CSS files/styles with it. In other words you can only copy HTML with inline styles but not with styles from external files.

comment:2 Changed 5 years ago by Dan Dascalescu

That makes sense.

If the code from the Addy Osmani link above references externally-defined CSS classes, how do Summernote and AlloyEditor manage to preserve the formatting?

Changed 5 years ago by Jakub Ś

Attachment: summernote.png added

comment:3 Changed 5 years ago by Jakub Ś

Honestly I'm not sure how you have managed to get this result.

I have tried summernote demo but result is quite different from yours.

comment:4 Changed 5 years ago by Jakub Ś

Got it. Sorry. I have checked it on FF and not on Chrome.

Let me explain.
It seems that Chrome attaches these styles to HTML so summernote editor doesn't do anything but pastes this entire HTML thus you see this result. Please see attached txt file to see what gets pasted from Chrome for such a small fragment of code.

CKEditor can also do that :). By default CKEditor uses ACF which filters content you don't want to see in editor (you can define tags, attributes classes and styles you want to use). You can either configure ACF or disable it to see same result as in Chrome.

Below are some links about ACF:
http://docs.ckeditor.com/#!/guide/dev_acf
http://docs.ckeditor.com/#!/guide/dev_advanced_content_filter
http://docs.ckeditor.com/#!/guide/dev_disallowed_content
http://docs.ckeditor.com/#!/api/CKEDITOR.filter-method-addTransformations
http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-allowedContent
http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-extraAllowedContent
http://nightly.ckeditor.com/14-03-20-07-05/full/samples/datafiltering.html

Changed 5 years ago by Jakub Ś

Attachment: HTML from Chrome.txt added
Note: See TracTickets for help on using tickets.
© 2003 – 2019 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy