Question

tl; dr我不想在the fiddle

中允许嵌套表格

我试图尽可能地限制我的CKEditor中允许的html。我试图强制执行的规则之一是只允许根中的表，绝对不允许嵌套表。我的问题就在于...... 我已尝试使用allowedContent，disallowedContent配置条目并立即更改CKEDITOR.dtd，目前无效。

// doesnt seem to do anything
// CKEDITOR.dtd.$blockLimit.table = 0;

// cannot create table at all
// CKEDITOR.dtd.td.table = 0;

CKEDITOR.replace('editor1', {
    customConfig: '',
    toolbarGroups: [
        { name: 'blocks', groups: [ 'insert'] }
    ],
    removeButtons: 'Image,HorizontalRule,SpecialChar,Blockquote',
    // disallowedContent: {
    //     table: {
    //         match: function( element ) {
    //             no way to access what the parent element is
    //         }
    //     }
    // }
});

Try the fiddle!

Answer 1

毕竟在dtd中找到了解决方案。从table删除CKEDITOR.dtd.td导致无法创建表的问题是CKEditor中的一个错误。

CKEDITOR.dtd.td指向与CKEDITOR.dtd.body相同的对象以及其他一些对象。因此，如果我只想更改CKEDITOR.dtd.td ，我需要制作对象引用的副本并对其进行处理。

// using Lo-Dash to create a copy of the object
CKEDITOR.dtd.td = _.merge({}, CKEDITOR.dtd.td);
delete CKEDITOR.dtd.td.table;

CKEDITOR.replace('editor1', {
    customConfig: '',
    toolbarGroups: [
        { name: 'blocks', groups: [ 'insert'] }
    ],
    removeButtons: 'Image,HorizontalRule,SpecialChar,Blockquote'
});

当光标位于表格单元格内时，它会产生所需的灰色按钮结果，而在正文中则为正常按钮。

请参阅更新后的Fiddle。

Answer 2

我更新了您的JsFiddle，现在它删除了嵌套的表格标记，但保留了内容：

CKEDITOR.replace('editor1', {
    customConfig: '',
    toolbarGroups: [
        { name: 'blocks', groups: [ 'insert'] }
    ],
    removeButtons: 'Image,HorizontalRule,SpecialChar,Blockquote',
    disallowedContent: {
         tr: {
             match: function( element ) {
                 var parentTableCount = 0;
                 for (var elem = element.parent; elem; elem = elem.parent)
                 {
                     if (elem.name == 'table')
                         parentTableCount++;

                     if (parentTableCount > 1)
                         return true;
                 }
             }
         },
         table: {
             match: function( element ) {
                 for (var elem = element.parent; elem; elem = elem.parent)
                 {
                     if (elem.name == 'table')
                         return true;
                 }
             }
         }
    }
});

您可能希望根据需要调整它，因为我的示例主要显示了如何访问父元素。希望有所帮助。

限制CKEditor

2 个答案: