Question

我开始在我的一个项目中使用CKEditor并喜欢它。我无法弄清楚（或发现）的一件事是如何禁止另一个元素进入另一个元素。我想禁止在表格单元格p或th内发生td。

此：

<table>
    <tr>
        <td>
            <p>Foo</p>        
        </td>
    </tr>
</table>

应转换为：

<table>
    <tr>
        <td>Foo</td>
    </tr>
</table>

隐藏段落样式的CSS技巧不是一种选择。

table p { margin: 0; } /* I don't want this! */

我的CKEditor初始化如下：

CKEDITOR.replace( 'id_text', {
    allowedContent: 'table(table); table(table-striped); thead tbody tfoot tr td th;',
    toolbar: [
        ['Source'], 
        ['Format'], 
        ['Table']
    ]
});

似乎allowedContent属性不处理父子规则。如何在其他元素内部发生过滤元素？

Answer 1

我找不到内置CKEditor设置来禁止在其他标记中出现标记。但我确实在SO和blog找到了CKEditor过滤内容的示例。

这些文章和缺少的'disallowContent'设置让我转向另一个方向：在粘贴+服务器端清理干净。

CKEditor会触发信号on events，例如paste，insertHtml，mode更改等。下一个脚本会在粘贴时添加一个侦听器。所有出现的“Foo”都将替换为“Bar”。

CKEDITOR.on('instanceReady', function(ev) {
   ev.editor.on('paste', function(evt) {
   evt.data.dataValue = evt.data.dataValue.replace( /Foo/g, 'Bar' );
   }, 9);
});

我在Django管理站点中使用CKEditor并且可以使用jQuery。下一个脚本将上面的jQuery DOM操作结合起来。每个选定的元素都将替换为它自己的内容。

var $ = django.jQuery;

CKEDITOR.on("instanceReady", function( ev ) {
    ev.editor.on("paste", function( evt ) {
        var data = $.parseHTML(evt.data.dataValue);
        $( "th p, td p", data).each( function() {
            $( this ).replaceWith(  $( this ).contents() );
            });
        evt.data.dataValue = $('<div>').append(data).html();
        }, 9);
    });

注意：仍然可以通过源模式或格式菜单在表格单元格中插入段落。这些段落不被禁止或删除。我选择清理数据服务器端。

CKEditor：如何从表格单元格中删除p元素？

1 个答案: