CKEditor4.x：禁止一个标签位于另一个标签内

Question

我最近开始使用 CKEditor 4.x，但我希望用户只能使用非常有限的标签集。此外，并非所有标签组合都有用。

我目前只允许这些标签/格式：

<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 似乎是重写，因此该解决方案似乎不适用（已作为修复关闭）。

有谁知道，我该如何防止这种情况？为了更清楚地说明：这与粘贴文本或源编辑无关，我对编辑器进行了很大限制，并且窗格仅包含这些样式和撤消/重做。但是，使用普通命令仍然可以创建这种不需要的样式。

我想要的是：

<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>
    ...

Answer 1

没有办法轻易实现这一点。原因是创建此内容的方法有很多。可以粘贴列表，可以在列表项中创建标题，可以在标题上创建列表，也许您可​​以通过删除、拖放等来完成此操作。可以处理所有这些情况并防止创建这些结构，但这需要大量工作。

相反，我认为您可以采用某种方式设置li>p, li>h3样式，使内部块在编辑器内不可见（无边距，相同的字体大小）。然后，您还可以在显示该内容的页面上应用这些样式，或者可以在从编辑器检索内容时清理内容。后者可以通过以下方式完成（参见editor#toDataFormat事件）：

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 );