在CkEditor中使用符合HTML5标准的表格

Question

我注意到使用CkEditor的默认表格插件（参见this和this），您可以将表格添加到编辑器中。

我的问题是，现在我需要强制编辑器内容（通过editor.getData()获取）成为HTML5有效内容。

实际上，当我添加一个表格时，结果如下：

<table cellspacing="1" cellpadding="1" border="1" style="width: 500px;">
    <tr>
        <td>
            [...]
        </td>

        [...]

    </tr>

    [...]

</table>

正如您所看到的，table标签有一些在HTML5中被弃用的属性。在上面的例子中，您可以看到cellspacing，border和cellpadding。

有人在dev.ckeditor.com上报告了这个问题（请参见this和this other），但没有解释如何解决这个问题。

您知道解决这个问题的一些技巧吗？

---

我的解决方案

我想分享我的解决方案，基于Reinmar的答案。

我在config.js文件中添加了以下行：

config.disallowedContent = "table[cellspacing,cellpadding,border,align,summary,bgcolor,frame,rules,width]; td[axis,abbr,scope,align,bgcolor,char,charoff,height,nowrap,valign,width]; th[axis,abbr,align,bgcolor,char,charoff,height,nowrap,valign,width]; tbody[align,char,charoff,valign]; tfoot[align,char,charoff,valign]; thead[align,char,charoff,valign]; tr[align,bgcolor,char,charoff,valign]; col[align,char,charoff,valign,width]; colgroup[align,char,charoff,valign,width]";

因此，我禁用了与表格相关的所有非HTML5属性。

- Vito Gentile

---

那么你的问题是关于如何配置ACF吗？ - user247702

我不知道 ACF 怎么能解决我的问题。如果你知道一种可以用它来帮助我的方法，那它就是一个有效的解决方案。 - Vito Gentile

我个人没有使用过ACF，但是这里建议使用它来实现你想要的功能。从快速查看来看，我认为你需要特别使用“不允许的内容”功能。具体请参考Disallowed Content。 - user247702

Answer 1

自CKEditor 4.4以来，您可以这样做：

CKEDITOR.replace( 'editor1', {
    disallowedContent: 'table[cellspacing,cellpadding,border]'
} );

完成啦 :)!

您可以在禁止内容指南中阅读更多内容。

- Reinmar

---

我正在使用CKEditor 4.3.1。有没有安全的方法升级到4.4，而不会丢失配置和已安装的插件？ - Vito Gentile

这取决于您安装了什么，如何安装以及您进行了哪些更改。如果您使用了在线构建器，则可以上传build-config.js，该文件可以在主目录中找到。然后，备份您的config.js，提取新版本，替换配置文件，有很大的机会它将正常工作。还要确保您至少阅读了changelog中的重要新闻。 - Reinmar

我添加了我的解决方案，使用了HTML5中弃用的每个属性，与表格有关。再次感谢。 - Vito Gentile