CKEditor Paste From Word table background color issue
I am using CKEditor 4.1 and I am trying to get the background color of yellow so that it appears in the pasted content. The table is taken from word (so it means it is in RTF). Everything seems to be inserted except for the background color. The weird thing is that it inserts the exact look I am using in the Paste from Word box, but if you look in the content window, it doesn't display 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 with an insert. I've tried everything including disabling ACF (Advanced Content Filter).
Here are my current settings for Allowed Content Config. Again, I disabled this and it doesn't work either.
When I check the code for the Insert From Word dialog box, the background seems to be set to the background of td styles. eg: 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: '*'
}
};
source to share
Additional information for future reference.
First of all, pasting from MS Word is tricky (and it is often more difficult with Excel). The problems stem from the fact that the input coming into CKEditor is often completely different from the version of Word, OS and browser used in the process.
However, these three configuration options allow you to fine tune the result:
- config.pasteFromWordRemoveStyles , by default
true
, removes styles that cannot be processed by the editor; - config.pasteFromWordRemoveFontStyles , by default
true
, removes font formatting (font size, family, text and background style); - config.pasteFromWordNumberedHeadingToList , which is set to by default
false
, converts numbered headers to lists.
Remember that if you make any changes to the editor configuration, you need to clear your browser cache , as otherwise you could get extremely frustrated not seeing any changes if in fact your problem has already been resolved.
Since CKEditor 4.1 you need to add Advanced Content Filter to your equation. The content filtering mechanism ensures that the data entering the editor is supported by the editor features that are included in your configuration (to keep things simple: if there is no table, list, or text / background button on the toolbar, this formatting will be stripped of rich text Word). ACF is a very flexible tool, so you can easily customize it to your needs .
Remember that if you need to enable additional features (aka set up automatic mode and extend the filter configuration), you must define them using config.extraAllowedContent , not config.allowedContent which is used for other purposes ( specifying all allowed tags manually ).
Last but not least, please update your CKEditor version, you missed out on many interesting adventures like widgets , many new plugins, IE11 support, ACF extensions, etc.
source to share