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指南中阅读更多内容。

在CkEditor中使用符合HTML5的表

我的解决方案

1 个答案: