CKEditor removes class attribute from table

Question

In my <textarea>, I have this text:

<table class='table table-striped'>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>

After using CKEDITOR.replace(), my text area become a CKEditor and it has a table in it. The problem is CKEditor adds its class to my table called cke_show_border. Only attributes in that class are applied to the table, none of my class is applied.

What should I do to make it apply my table and table-striped class?

Thanks for your help.

Answer 1

You can allow anything: tags, classes, styles and attributes by setting

config.allowedContent = true;

However, better is to allow only features you need additionally to what is provided with plugins. To allow any class to be attached to a table, type

config.extraAllowedContent = 'table(*)';

To read more about rules syntax go here: http://docs.ckeditor.com/#!/guide/dev_allowed_content_rules-section-string-format

Answer 2

I had a similar issue where opening and saving with CKEditor 7.x.1.13 in Drupal 7 was stripping out attributes in my HTML elements. Adding the following under "Custom JavaScript configuration" fixed it.

config.allowedContent = true;

Answer 3

As I see here, most likely you're using CKEditor 4.1 or newer and your problem is Advanced Content Filter. I guess that there's no "Advanced" tab in your table dialog as well as no dialogadvtab plugin in your editor package:

CKEDITOR.instances.yourInstance.plugins.dialogadvtab
> undefined

Right? Then you got to configure config.extraAllowedContent:

config.extraAllowedContent = `table[class]`;

Why is it so, you may ask? This is because there's no feature (command, button, dialog, field, etc.) in the editor that appends classes to <table> tags. So there's no feature that says:

"Hey, editor, I'm gonna add classes to tables, and you should be cool with it."

In fact, this is done by defining allowedContent along with feature definition. So if there's no dialogadvtab plugin loaded that would tell the editor that tables can go with classes, editor discards class attributes on the output as they are not supported by any feature.

This behavior is to keep your markup clean and take the control of what is produced by your WYSIWYG editor. Still, it needs attention and basic understanding.

See my previous answer to the similar question: CKEditor automatically strips classes from div