CKEditor4.x: 不允许一个标签包含在另一个标签中

CKEditor4.x: Disallow one tag inside an other

我最近开始使用 CKEditor 4.x,但我希望用户只能使用非常有限的一组标签。也不是所有的标签组合都有用。

我目前只允许这些tags/formats:

<p>, <h3>, <ul>, <ol>, <li>, <strong>, <em> (and maybe some more)

我只需要,列表是为正常样式而不是标题制作的。但是绝对可以在列表元素中创建标题。结果看起来很有趣,但没有用。列表(点或编号)的样式为普通文本,但标题文本为标题(不同字体、不同字体大小、不同颜色)。

我想禁止这个。我还发现,在某些情况下,CKEditor 还会将 <p> 标签放在列表中,这也是我不想要的。我想,这主要发生在当我将列表中的标题更改回正常时,CKEditor 只是将标题标签更改为 <p>.

是否有可能阻止 CKEditor 4 这样做?我看到,甚至有一张关于 CKEditor 3 类似问题的票:

http://dev.ckeditor.com/ticket/6849

但由于CKEditor 4好像是rewrite,解决方案好像不适用(已关闭as fixed)。

有人知道我该如何预防吗?更清楚地说:这与粘贴文本或源代码编辑无关,我非常限制编辑器,窗格仅包含这些样式和 undo/redo。但是,使用普通命令仍然可以创建这种不需要的样式。

我想要的是:

<h3>A simple headline</h3>
<p>A simple paragraph</p>
<ul>
    <li>First text</li>
    ...
</ul>

想要的是:

<ul>
    <li><p>First text</p></li>
    ...

甚至:

<ul>
    <li><h3>First text</h3></li>
    ...

没有办法轻松实现这一目标。原因是有很多方法可以创建此内容。可以粘贴列表,可以在列表项中创建标题,可以在标题上创建列表,也许你可以通过删除、拖放等方式来做到这一点。可以处理所有这些情况并防止创建这些结构,但这将是很多工作。

相反,我认为您可以设置 li>p, li>h3 的样式,使内部块在编辑器中不可见(无边距,相同的字体大小)。然后,您还可以在显示该内容的页面上应用这些样式,或者您可以在从编辑器检索内容时清除内容。后者可以完成,例如这样(见editor#toDataFormat event):

editor.on( 'toDataFormat', function( evt ) {
    var filter = new CKEDITOR.htmlParser.filter( {
        elements: {
            p: function( el ) {
                if ( el.parent && el.parent.name == 'li' ) {
                    delete el.name; // This removes the element and leaves its content.
                }
            }
        }
    } );

    filter.applyTo( evt.data.dataValue );
}, null, 12 );