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

[Dan Dascalescu]

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.

[Dan Dascalescu]

Formatting lost after pasting - text is black on black

[Jakub Ś]

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.

[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?

[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.

[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