javascript - 在 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 标签的一些属性是deprecated in HTML5。 .在上面的示例中，您可以看到 cellspacing、border 和 cellspadding。

有人在 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]";

通过这种方式，我禁用了所有 non-HTML5 attributes , 与表相关。

Answer 1

从 CKEditor 4.4 开始你可以这样做:

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

瞧 :)!

您可以在 Disallowed Content 中阅读更多内容指导。