CKeditor - Change table style

Question

I am trying to change the table style for CKeditor, since it keeps outputting 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 instead.

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

How do I make this possible? I have tried config.allowedContent = true; but that didn't work, it still outputs the annoying white background on my dark theme.

I am using CKeditor plugin for MyBB.

Answer 1

When you look at the source code of the mybb ckeditor plugin, you can see they print out the inline style 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 could remove the inline style from the 'inc/plugins/ckeditor/hooks.php' file, but that's a bad practice (issues when update).

So I wrote a small plugin, which you can copy into your plugin folder and activate (the filename should be cktableoverride.php).
The plugin hooks into the same event the ckeditor plugin uses to override the template. When the plugin is activated, you'll get a table structure without inline styles, so you can style it through css (or add your own inline style in the plugin code).