Стайлинг TinyMCE выпускает столы с PHP (Hor Zebra)

Question

Я использую собственный хостинг, который я скачал с https://www.tiny.cloud/get-tiny/self-hosted/. Это позволяет мне выполнять редактирование «Что видишь, то и делаешь».

Моя проблема в том, что когда я вставляю таблицы, они не имеют какого-либо стиля, и поэтому их трудно читать.

Вот как выглядит вставка таблицы TinyMCE:

В результате получается следующий код HTML :

<p>Table example:</p>
<table style="border-collapse: collapse; width: 100%; height: 192px;" border="1">
<tbody>
<tr style="height: 48px;">
<td style="width: 25%; height: 48px;">Headcell 1</td>
<td style="width: 25%; height: 48px;">Headcell 2</td>
<td style="width: 25%; height: 48px;">Headcell 3</td>
<td style="width: 25%; height: 48px;">Headcell 4</td>
</tr>
<tr style="height: 48px;">
<td style="width: 25%; height: 48px;">Bodycell 1</td>
<td style="width: 25%; height: 48px;">Bodycell 2</td>
<td style="width: 25%; height: 48px;">Bodycell 3</td>
<td style="width: 25%; height: 48px;">Bodycell 4</td>
</tr>
<tr style="height: 48px;">
<td style="width: 25%; height: 48px;">Odd 1</td>
<td style="width: 25%; height: 48px;">Odd 2</td>
<td style="width: 25%; height: 48px;">Odd 3</td>
<td style="width: 25%; height: 48px;">Odd 4</td>
</tr>
<tr style="height: 48px;">
<td style="width: 25%; height: 48px;">Bodycell 1</td>
<td style="width: 25%; height: 48px;">Bodycell 2</td>
<td style="width: 25%; height: 48px;">Bodycell 3</td>
<td style="width: 25%; height: 48px;">Bodycell 4</td>
</tr>
<tr>
<td style="width: 25%;">Odd 1</td>
<td style="width: 25%;">Odd 2</td>
<td style="width: 25%;">Odd 3</td>
<td style="width: 25%;">Odd 4</td>
</tr>
</tbody>
</table>

Однако я хотел бы, чтобы он произвел следующее:

<p>Table example:</p>
<table class="hor-zebra">
 <thead>
  <tr>
   <th scope="col">
    <span>Headcell 1</span>
   </th>
   <th scope="col">
    <span>Headcell 2</span>
   </th>
   <th scope="col">
    <span>Headcell 3</span>
   </th>
   <th scope="col">
    <span>Headcell 4</span>
   </th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>
    Bodycell 1
   </td>
   <td>
    Bodycell 2
   </td>
   <td>
    Bodycell 3
   </td>
   <td>
    Bodycell 4
   </td>
  </tr>
  <tr>
   <td class="odd">
    Bodycell 1
   </td>
   <td class="odd">
    Bodycell 2
   </td>
   <td class="odd">
    Bodycell 3
   </td>
   <td class="odd">
    Bodycell 4
   </td>
  </tr>
  <tr>
   <td>
    Bodycell 1
   </td>
   <td>
    Bodycell 2
   </td>
   <td>
    Bodycell 3
   </td>
   <td>
    Bodycell 4
   </td>
  </tr>
  <tr>
   <td class="odd">
    Bodycell 1
   </td>
   <td class="odd">
    Bodycell 2
   </td>
   <td class="odd">
    Bodycell 3
   </td>
   <td class="odd">
    Bodycell 4
   </td>
  </tr>
 </tbody>
</table>

(Это CSS если кто-то захочет)

/* Tables Hor Zebra
------------------------------------------------------------------ */
table.hor-zebra {
  width: 100%;
  text-align: left;
  border-spacing:0;
  border: #cccccc 1px solid;
}

table.hor-zebra>thead {
  border-top: #cccccc 1px solid;
}

table.hor-zebra>thead>tr>th {
    background: #e2e2e2;
    border-top: #ffffff 1px solid;
    border-bottom: #cccccc 1px solid;
    padding: 4px;
    color: #000;
}

table.hor-zebra>tbody>tr>td {
    background: #f3f3f3;
    border-bottom: #cccccc 1px solid;
    padding: 8px 4px 8px 4px;
}

table.hor-zebra>tbody>tr>td.odd {
    background: #f8f8f8;
    border-bottom: #cccccc 1px solid;
}
table.hor-zebra>tbody>tr>td.important {
    background: #fff7e5;
    border-bottom: #eabc63 1px solid;
}
table.hor-zebra>tbody>tr>td.danger {
    background: #ffe7e5;
    border-bottom: #ff4940 1px solid;
    border-top: #ff4940 1px solid;
}

table.hor-zebra>tbody>tr:hover td {
    background: #faf4f2;
}

Решение? Я использую PHP и получаю текст от TinyMCE с

$ inp_text = $ _POST [' inp_text '];

Я думал об использовании функции PHP str_replace, чтобы просто заменить код, который я не хотел появляться, но я не думаю, что этого будет достаточно. Кто-нибудь, кто может мне помочь?

Answer 1

TinyMCE генерирует HTML для вставленных таблиц. Их можно стилизовать с помощью CSS.

. Вы можете добавить CSS в редактор TinyMCE, связавшись с удаленной таблицей стилей с помощью параметра конфигурации content_css tiny.init():

https://www.tiny.cloud/docs/configure/content-appearance/#content_css

... или путем включения желаемого стиля в опцию content_style:

https://www.tiny.cloud/docs/configure/content-appearance/#content_style