CKeditor - change table style

I am trying to change the table style for CKeditor , as it continues to display this.

 <table class="ckeditor_table" style="width: 100%;border-collapse:collapse;border-spacing:0;table-layout:fixed;border: 2px solid #333;background:#fff;"><tr><td style="border: 1px dashed #999;padding: 3px 5px;vertical-align: top;min-height:20px;"> </td><td style="border: 1px dashed #999;padding: 3px 5px;vertical-align: top;min-height:20px;"> </td><td style="border: 1px dashed #999;padding: 3px 5px;vertical-align: top;min-height:20px;"> </td><td style="border: 1px dashed #999;padding: 3px 5px;vertical-align: top;min-height:20px;"> </td><td style="border: 1px dashed #999;padding: 3px 5px;vertical-align: top;min-height:20px;"> </td></tr><tr><td style="border: 1px dashed #999;padding: 3px 5px;vertical-align: top;min-height:20px;"> </td><td style="border: 1px dashed #999;padding: 3px 5px;vertical-align: top;min-height:20px;"> </td><td style="border: 1px dashed #999;padding: 3px 5px;vertical-align: top;min-height:20px;"> </td><td style="border: 1px dashed #999;padding: 3px 5px;vertical-align: top;min-height:20px;"> </td><td style="border: 1px dashed #999;padding: 3px 5px;vertical-align: top;min-height:20px;"> </td></tr><tr><td style="border: 1px dashed #999;padding: 3px 5px;vertical-align: top;min-height:20px;"> </td><td style="border: 1px dashed #999;padding: 3px 5px;vertical-align: top;min-height:20px;"> </td><td style="border: 1px dashed #999;padding: 3px 5px;vertical-align: top;min-height:20px;"> </td><td style="border: 1px dashed #999;padding: 3px 5px;vertical-align: top;min-height:20px;"> </td><td style="border: 1px dashed #999;padding: 3px 5px;vertical-align: top;min-height:20px;"> </table> 

I want to output something like this.

 <table class="table"> <tr> <td></td> <td></td> <td></td> </tr> </table> 

How to do it? I tried config.allowedContent = true; but it didn’t work, it still brings an annoying white background to my dark theme.

I am using the CKeditor plugin for MyBB.

+6
source share
1 answer

When you look at the source code for the mybb ckeditor plugin, you can see that they print the inline style that you posted.

 while(preg_match("#\[table\](.*?)\[/table\]#si", $m, $m1)) { while(preg_match("#\[tr\](.*?)\[/tr\]#si", $m1[1], $m2)) { $m2[1] = preg_replace("#\[td\](.*?)\[/td\]#si", '<td style="border: 1px dashed #999;padding: 3px 5px;vertical-align: top;min-height:20px;">$1</td>', $m2[1]); $m1[1] = str_replace($m2[0], '<tr>'.$m2[1].'</tr>', $m1[1]); } $m = str_replace($m1[0], '<table class="ckeditor_table" style="width: 100%;border-collapse:collapse;border-spacing:0;table-layout:fixed;border: 2px solid #333;background:#fff;">'.$m1[1].'</table>', $m); } 

You can remove the inline style from the file "inc / plugins / ckeditor / hooks.php", but this is bad practice (problems updating).

So, I wrote a small plugin that you can copy to your plugin folder and activate (the file name should be cktableoverride.php). <sh> The plugin connects to the same event that the ckeditor plugin uses to override the template. When the plugin is activated, you will get a table structure without inline styles, so you can create it via css (or add your own inline style to the plugin code).

+3
source

All Articles