用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设置样式。

您可以通过使用content_css tiny.init()配置选项链接到远程样式表来将CSS注入TinyMCE编辑器：

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

...或通过在content_style选项中包括所需的样式：

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