CKEditor Paste From Word issue with background color of table

Question

I am using CKEditor 4.1 and I'm trying to get the background color of yellow to show up on the pasted content. The table is from word (so this means it's in RTF). Everything seems to paste except for the background color. What is strange is that it's pasting the exact look I'm going for in the "Paste from word" box, but if you look in the content box, it does not show the background color.

The screenshot below shows the Paste From Word dialog box and how I want the content to look. The Editor behind the dialog shows how the content ends up getting pasted. I have tried everything including disabling the ACF (Advanced Content Filter).

enter image description here

Here are my current settings for the Allowed Content Config. Again, I have disabled this, and it doesn't work either.

When I inspect the "Paste from word" dialog box code, the background seems to be being set within the td styles background. for example: td styles='background-color: yellow'

config.allowedContent = {
'p h1 h2 h3 a strong em': {
  styles: ['color']
},
'table tbody thead tfoot tr th td': true,
'table': {
    attributes: ['width', 'border', 'cellpadding', 'cellspacing'],
    styles: '*'
},
"tr td": {
    attributes: ['background-color', 'background', 'rowspan', 'colspan'],
    styles: '*'
},
"iframe": {
    attributes: '*',
    styles: '*'
}

};

Have you tried setting the config.pasteFromWordRemoveFontStyles configuration value to false? — Anna Tomanek
Hey thanks for trying to help me. I just tried your suggestion now and it doesn't seem to work. Hmmm I'll keep hacking it I guess — Kirk

Anna Tomanek Anna Tomanek · Accepted Answer · 2015-01-08T21:39:52

Some more information for future reference.

First of all, pasting from MS Word is tricky (and it's often more tricky with Excel). The problems stem from the fact that the input coming to CKEditor is often totally different depending on the Word version, OS and browser that are used in the process.

Nevertheless, these three configuration options let you fine-tune the result:

config.pasteFromWordRemoveStyles, by default set to true, removes styles that cannot be handled by the editor;
config.pasteFromWordRemoveFontStyles, by default set to true, removes font formatting (font size, family, text and background style);
config.pasteFromWordNumberedHeadingToList, by default set to false, converts numbered headings to lists.

Do remember that if you introduce any change to the editor configuration, you need to clear the browser cache as otherwise you might get extremely frustrated with seeing no change when in fact your problem is already solved.

Since CKEditor 4.1 you need to add Advanced Content Filter into the equation, too. The content filtering mechanism makes sure that the data that enters the editor is supported by editor features that are enabled in your configuration (to simplify it: if there is no table, list or text/background color button in your toolbar, this formatting will be stripped from your Word-formatted text). ACF is a highly flexible tool, though, so you can easily adjust it to your needs.

Do remember that if you need to enable additional features (a.k.a. adjust the automatic mode and extend the filter configuration), you should define them with config.extraAllowedContent, not config.allowedContent, which is used for other purposes (specifying all allowed tags manually).

Last but not least, upgrade your CKEditor version, you're missing out on a lot of cool featues like widgets, plenty of new plugins, IE11 support, ACF extensions etc.

CKEditor Paste From Word issue with background color of table

2 Answers