强制 CKEDITOR 停止解包块答案

【问题标题】：Force CKEDITOR to stop unwrapping blocks强制 CKEDITOR 停止解包块
【发布时间】：2014-07-02 05:43:24
【问题描述】：

假设我有一个块标记：

<div class="block">
    <a href="/">
        <div class="divInside"></div>
        <img src="/bla" />
        <p>Parargraph</p>
    </a>
</div>

HTML5：声明<a> 元素“可以围绕整个段落、列表、表格等，甚至整个部分，只要其中没有交互式内容（例如按钮或其他链接）”。

所以我这里的东西是完全有效的，不是吗？为什么 ckeditor 不断重新格式化我的源代码，例如上面，一旦我在富编辑器和源代码模式之间进行更改，会执行以下操作：

<div class="block">
    <div class="divInside">
        &nbsp;
    </div>
    <a href="/"><img src="/bla" /> </a>
    <p>
        <a href="/">Parargraph</a>
    </p>
    <a href="/"> </a>
</div>

我对它对空 div 的作用没有任何问题，但是对锚点的作用非常烦人。

有没有办法禁用它？

【问题讨论】：

CKEditor 缺乏对 HTML5 中引入的块级链接的支持，因为这是一个相当大的变化。出于同样的原因，HTML5 没有 DTD - 它无法创建。 CKEditor 基于类似 DTD 的对象 (CKEDITOR.dtd) 解析和处理内容，因此，如果没有深入的架构更改，它就不能同时支持内联和块链接（所谓的透明元素）。当然会做出这种改变，但我们需要时间。
看我之前的回答stackoverflow.com/questions/16591205/…
@oleq 查看我发布的答案，我想出了一个很好的解决方案！它基本上告诉 ckeditor 不验证锚点。
How to configure CKEditor to allow html block-level tags to be wrapped in an anchor tag的可能重复

标签： javascript jquery html ckeditor

【解决方案1】：

对于未来遇到同样问题的人，我确实提出了一个解决方案，但我对此并不太满意，因为应该有一个选项，因为它在 PERFECTLY 中有效HTML5

在您的 config.js 文件中，添加以下配置设置：

config.protectedSource.push(/[\r|\n]|(<a([^*>]+>)|<\/a>)/g);

这是一个正则表达式的演示：DEMO

基本上我们在这里所做的就是：

查找新行\r
查找新行\n
找到任何打开的锚点：<a 后跟一个文本，直到我们来到 > - (<a([^*>]+>)
查找结束锚标记<\/a>

这个正则表达式将停止验证找到的结果，我确信有更好的方法来做到这一点，因为我不是 regexPERT（

希望对你有帮助

【讨论】：

但是对protectedSource使用那个正则表达式，不代表不能在编辑器中编辑链接吗？
根据他们的文档是的，但我还添加了 config.allowedContent = true 似乎没有过滤 html。 @AlfonsoML
allowedContent 禁用 ACF 过滤器，因此 CKEditor 不会尝试去除任何无法理解的元素或属性。但我认为它与这个问题完全无关，我的评论是：有了这个受保护的来源，你能在编辑器中编辑现有的链接吗？
是的，我仍然可以很好地编辑它，我不知道我是否以某种方式破坏了组合标签的功能，但是对我来说，这完全符合我对@AlfonsoML 的要求
我真的无法理解。我创建这个小提琴只是为了测试，正如我所料，而在所见即所得模式下，编辑器无法识别链接，因此用户将无法编辑它们。 jsfiddle.net/DEHwL我添加了一个内联测试和另一个带有框架编辑器的测试，它们都有相同的行为。