CKeditor - 更改表格样式

Question

我正在尝试更改表格样式CKeditor,因为它一直在输出它.

<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>

我想输出这样的东西.

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

我该如何做到这一点？我试过config.allowedContent = true;但是没有用,它仍然在我黑暗的主题上输出烦人的白色背景.

我正在使用CKeditorMyBB的插件.

Answer 1

当您查看mybb ckeditor 插件的源代码时，您可以看到它们打印出您发布的内联样式。

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);
}

您可以从“inc/plugins/ckeditor/hooks.php”文件中删除内联样式，但这是一个不好的做法（更新时出现问题）。

所以我编写了一个小插件，您可以将其复制到插件文件夹中并激活（文件名应该是 cktableoverride.php）。
该插件挂钩到 ckeditor 插件用来覆盖模板的同一事件。激活插件后，您将获得一个没有内联样式的表结构，因此您可以通过 css 对其进行样式设置（或在插件代码中添加您自己的内联样式）。