CKeditor-изменить стиль таблицы

Я пытаюсь изменить стиль таблицы для 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; но это не сработало, он по-прежнему выводит раздражающий белый фон на мою темную тему.

я использую CKeditor плагин для MyBB.

6
ckeditor css html html-table javascript

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;"></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.РНР.)
Плагин крючки в то же событие плагин ckeditor использует для переопределения шаблона. Когда плагин активирован, вы получите структуру таблицы без встроенных стилей, чтобы вы могли стилизовать ее через css (или добавить свой собственный встроенный стиль в коде плагина).

3