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.

if you send this code from CKE to database you will have the table with your class and css will be applied as well. Never tried applying custom css to html tags inside CKE tho — DeiForm, Jul 24 '13 at 13:47
What do you mean by saying "send this code from CKE to database"? I just try to display it to users. — Triet Doan, Jul 24 '13 at 13:54

JTHouseCat · Answer 1 · 2015-07-27T05:11:57.417

9

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;

edited Jul 27 '15 at 05:11

answered Jan 06 '14 at 19:06

JTHouseCat

445
4
4

score 9 · Answer 2 · answered Mar 18 '15 at 08:41

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

score 5 · Answer 3 · edited May 23 '17 at 11:54

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

Thanks for your answer. But my `dialogadvtab` is existed. Besides, CKE doesn't remove my class, it's still there but it's not applied. — Triet Doan, Jul 25 '13 at 12:32

score 4 · Answer 4 · answered Aug 07 '14 at 13:00

I found a solution.

This turns off the filtering, it's working, but not a good idea...

config.allowedContent = true;

To play with a content string works fine for id, etc, but not for the class and style attributes, because you have () and {} for class and style filtering.

So my bet is for allowing any class in the editor is:

config.extraAllowedContent = '*(*)';

This allows any class and any inline style.

config.extraAllowedContent = '*(*);*{*}';

To allow only class="asdf1" and class="asdf2" for any tag:

config.extraAllowedContent = '*(asdf1,asdf2)';

(so you have to specify the classnames)

To allow only class="asdf" only for p tag:

config.extraAllowedContent = 'p(asdf)';

To allow id attribute for any tag:

config.extraAllowedContent = '*[id]';

etc etc

To allow style tag (<style type="text/css">...</style>):

config.extraAllowedContent = 'style';

To be a bit more complex:

config.extraAllowedContent = 'span;ul;li;table;td;style;*[id];*(*);*{*}';

Hope it's a better solution...

This is not what the question was about. – Andrew Barber Aug 07 '14 at 19:31 — Andrew Barber, Aug 07 '14 at 19:31

tika · Answer 5 · 2016-07-12T20:08:03.230

Thsi is the perfect example to use CKeditor 4.0 and higher version with our own css style.

  <script src="//cdn.ckeditor.com/4.5.9/standard-all/ckeditor.js"></script>



     var editor = CKEDITOR.replace("textarea", {
                        width: 750, height: 500, fullPage: true,
                        extraPlugins: 'stylesheetparser',

                        //// Do not load the default Styles configuration.
                        stylesSet: [],
                        on: {
                            instanceReady: function (evt) {
                            // Remove ckeditor table border
                            $("iframe").contents().find('body').removeClass('cke_show_borders');
                          }
                       }

                    });

There is another option for hiding table borders by configuring property : config.startupShowBorders = false; — tika, Jul 12 '16 at 22:02

score 0 · Answer 6 · answered Jul 24 '13 at 14:04

0

Add border=1 to the table and that way CKEditor won't set its own class on the table (there might be other ways to do it, but I always found this the easier as it doesn't requires any change to CKEditor)

answered Jul 24 '13 at 14:04

AlfonsoML

12,634
2
46
53

Yes, but it still doesn't apply my CSS class. – Triet Doan Jul 24 '13 at 14:33
You might have forgotten to add the css to the contents of the editor, or there's some other rule with higher priority. At this point we can only guess what's your problem. – AlfonsoML Jul 24 '13 at 16:43
No rule with higher priority here, I've checked it using Inspect Element of FireFox. Do I have to put the CSS to my text area, too? But the users will see the CSS in the editor? I store my CSS in a CSS file. – Triet Doan Jul 24 '13 at 16:57
Have you adjusted the value of the contentsCss config value to your CSS file? – AlfonsoML Jul 24 '13 at 17:49
What's that? How to adjust it? – Triet Doan Jul 25 '13 at 09:17

score 0 · Answer 7 · answered Apr 04 '18 at 14:09

0

config.allowedContent = true;

I fixed the same issue by adding this code on localhost. But on my server it did not work. Thank to this, I disabled 'tabletools' : 1, in ckeditor/build-config.js and it helped.

answered Apr 04 '18 at 14:09

gavrotte

1
1

Khadka Pushpendra · Answer 8 · 2020-09-17T18:41:10.423

And Still, in 2020, The problems occur to many users, for solution follow the step

1.goto ckeditor folder

2.find file config.js and open it

3.find

`config.extraAllowedContent = 'div(*)'`;

Add table(*) like this

`config.extraAllowedContent = 'table(*);div(*)';`

note if you don't find point no 3 then add the following code to config.js file

`config.div_wrapTable = true;` 


`config.extraAllowedContent = 'table(*);`

CKEditor removes class attribute from table

8 Answers8