修复转换到新的文章编辑器时的表格样式

What's my plan?

All Suites

Team, Growth, Professional, Enterprise, or Enterprise Plus

Support with

Guide Professional or Enterprise

Zendesk 于 2025 年第 2 季度在帐户中引入了 新的文章编辑器 。从旧版文章编辑器到新版文章编辑器的过渡 将分四个阶段进行。新的编辑器引入了一些改进和更改，包括如何在 HTML 和 CSS 级别设置表格样式。

由于新编辑器与旧版编辑器并非 100% 兼容，在升级到新编辑器期间或之后，可能会出现一些与表格相关的常见问题。本文将指导主题开发者和管理员解决这些问题，并提供相应解决方法和解决方案，以确保您的表格如预期适合品牌的样式。

注意：如果您遇到其他问题或解决方案，请在本文章底部评论部分添加。

本文章包含以下主题：

• 新编辑器中表格样式的更改
• 升级期间表格转换的示例
• 常见问题及其解决方法
• 供主题开发者和管理员使用的最佳实践

新编辑器中表格样式的更改

新版文章编辑器中表格的最大变化是将内联 CSS 样式直接应用于表格元素（例如 <table>， <tr>，和 <td>），而不是依靠 HTML 属性或外部 CSS 类设置表格的样式。新表格现在也包装到 <图> 工单标签。

• 在以前的编辑器中，表格样式是使用 HTML 属性的组合应用的（例如， cellpadding， border）和一些内联 CSS。

• 在新版编辑器中，表格自定义（例如边框宽度、边框颜色、背景颜色、单元格高度/宽度、文本颜色和边距）严格作为嵌入式 CSS 样式应用。

内联样式始终具有最高的 CSS 特定度，这意味着：

• 您的自定义主题 CSS 样式定位表格可能无法覆盖这些内联样式，除非您的选择器使用相等/更高的特定性，或使用 !important.

• 以 HTML 属性或元素选择器为目标的旧版主题和 CSS 样式，在升级到新的编辑器后，可能会发现其表格样式已损坏或应用不一致。

升级期间表格转换的示例

以下示例说明了将表格转换到新文章编辑器时可能发生的问题。

单元格边距从属性转换为内联样式

旧版文章编辑器使用 [cellpadding] 属性来指定边距，而新的文章编辑器则使用内联样式。以前的样式定位 [cellpadding] 属性或元素预期该属性将不再工作，直到调整。

旧版文章编辑器 HTML

<table cellpadding="20">

新版文章编辑器 HTML

<td style="padding: 20px;">

边框处理更改

以下示例说明了旧版编辑器、新版编辑器以及转换到新版编辑器的旧版文章是如何处理表格边框的。

在旧版编辑器中插入表格生成的 HTML

<table style="border-collapse: collapse; width: 100%" border="1">
  <tbody>
    <tr>
      <td style="width: 50%">A</td>
      <td style="width: 50%">B</td>
    </tr>
    <tr>
      <td style="width: 50%">C</td>
      <td style="width: 50%">D</td>
    </tr>
  </tbody>
</table>

在新版编辑器中插入表格生成的 HTML

<figure style="width: 100%" class="wysiwyg-table">
  <table style="border-style: solid; border-width: 1px">
    <tbody>
      <tr>
        <td style="border-style: solid; border-width: 1px">A</td>
        <td style="border-style: solid; border-width: 1px">B</td>
      </tr>
      <tr>
        <td style="border-style: solid; border-width: 1px">C</td>
        <td style="border-style: solid; border-width: 1px">D</td>
      </tr>
    </tbody>
  </table>
</figure>

将表格从旧版编辑器转换到新编辑器时生成的 HTML

<figure style="width: 100%" class="wysiwyg-table wysiwyg-table-align-left">
  <table
    style="border-collapse: collapse; border-style: solid; border-width: 1px"
  >
    <tbody>
      <tr>
        <td style="border-style: solid; border-width: 1px; width: 50%">A</td>
        <td style="border-style: solid; border-width: 1px; width: 50%">B</td>
      </tr>
      <tr>
        <td style="border-style: solid; border-width: 1px; width: 50%">C</td>
        <td style="border-style: solid; border-width: 1px; width: 50%">D</td>
      </tr>
    </tbody>
  </table>
</figure>

常见问题及其解决方法

本部分描述了将表格从旧版编辑器转换到新编辑器时出现的几个常见问题，以及解决这些问题的方法。

主题 CSS 不会覆盖表格样式（填充、边框和颜色）

问题：以前控制表格边框、单元格边距或背景颜色的自定义主题 CSS 不会应用，因为编辑器现在使用内联样式。

可能的解决方案：

• 提高 CSS 特定度：使用更具体的选择器来定位文章内的表格元素。添加 !important 确保您的样式覆盖行内样式。

  .article-body table,
  .article-body table td {
    border: 1px solid #ccc !important;
    padding: 10px !important;
    background-color: #f9f9f9 !important;
  }
  

• 以图包装容器为目标：现在编辑器中的表格会自动换行。 <figure> 个带有类的元素 .wysiwyg-table.根据需要自定义包装：

  figure.wysiwyg-table {
    margin: 1em auto;
    max-width: 90%;
  }
  

• 更新依赖于 HTML 属性的样式：如果您的主题样式表格使用属性选择器（例如 [cellpadding] 或 [border]），使用类或内联样式更新它们以针对新的结构。

升级后表格的外观有所不同

问题：表格丢失宽度或对齐方式配置，或者您会看到意外的边框和间距。

可能的解决方案：

• 新的编辑器将表格放在 <figure> 为行内宽度。您可能需要调整或覆盖。

  figure.wysiwyg-table {
    width: 100% !important;
    text-align: center;
  }
  figure.wysiwyg-table table {
    width: 100% !important;
    border-collapse: collapse;
  }
  

• 检查您主题的 table 默认样式，并适应新的结构。

自定义或复杂的表格 HTML 中断或需要手动调整

问题：如果您的自定义表格带有不常见的属性或自定义内嵌样式，从旧版编辑器升级到新编辑器可能无法完美处理这些问题。

注意：如果旧版编辑器中的表格已通过源代码修改，或包含新编辑器不支持的 HTML，新编辑器会将表格包裹在 HTML 块中。当发生这种情况时，您将无法使用新的文章编辑器表格组件编辑表格。而必须使用 源代码编辑器更新 HTML 块。

可能的解决方案：

• 审阅已迁移的文章的表格 HTML 源代码。
• 调整或重写自定义表格 HTML 以遵循新的模式：
  • 换行 <table> 在 a 内 <figure class="wysiwyg-table">.
  • 对两者的边框使用内联样式 <table> 和 <td>.

• 考虑在新编辑器中重新创建复杂的表格，以确保兼容性。

供主题开发者和管理员使用的最佳实践

在将表格迁移到新版文章编辑器时，使用以下最佳实践可以最大限度地减少问题：

• 使用特定 CSS 选择器定位 .wysiwyg-table，内的表格 .article-body，或 figure 元素换行表格。
• 使用 !important 小心覆盖内联样式。
• 在多种浏览器和设备尺寸上测试升级期间和之后的表格。
• 让内容撰写者了解内联样式的可能性，以及尽量减少表格自定义以便于维护的必要性。
• 在执行批量升级或深度自定义之前，请备份您的帮助中心主题 和文章内容。

翻译免责声明：本文章使用自动翻译软件翻译，以便您了解基本内容。 我们已采取合理措施提供准确翻译，但不保证翻译准确性

如对翻译准确性有任何疑问，请以文章的英语版本为准。