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; 但這不起作用，它仍然在我黑暗的主題上輸出惱人的白色背景。

我正在為MyBB使用CKeditor插件。

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設置樣式（或在插件代碼中添加自己的內聯樣式）。