html - 如果 HTML 不正确，Ckeditor 4 将删除 标签。如何阻止这种行为

Question

我们在项目中使用 CKEditor。我们最近将版本从 3.X 升级到 4.x。更新后，我们看不到<img>旧保存文档中的标签。当我们点击来源时，我们看到

<p>&nbsp;<p>代替 <p><img ......><p> .

进一步调试，我们发现很多文档中都有<img>标签在 <img> 中也有垃圾属性标签如 <img /="/" src="/folder/11801321/112267100.neck.png" height="308" width="467"> .

垃圾，我指的是标签 /="/" 的这一部分.这是我们在处理用户输入时引入的错误。我们将旧的 CKEditor 版本恢复到 3.X，编辑器在内部处理垃圾值。它正在修剪它。所以用户从来没有提示过。

但是现在 CKEditor 4 不以同样的方式处理 HTML。它实际上是剥离整个<img>标签。

我们有两种选择来解决这个问题。1.去除所有文档中的垃圾字符。这是一个巨大的数据。需要用户批准才能执行。2. 更改 CKEditor 4 配置设置以获得与 CKEditor 3.X 相同的行为。

我们赞成第 2 点。我一直在搜索并尝试几个配置设置，但未能确定。

如果有人遇到同样的问题并已解决，请告诉我。

Answer 1

如果你真的想要，你可以在 img 中设置所有代码标记为“ protected ”，这样编辑器就不会删除这段代码:

CKEDITOR.config.protectedSource.push(/<img \/="\/" .*?>/g)

1. 请记住，您的最终 html 将无效。
2. 由于这部​​分代码是“ protected ”，您不会在编辑器中看到这些图像。

这是一个工作示例:
https://jsfiddle.net/oLb4Lmdb/

但是 - 我真的认为最好替换字符串 <img \/="\/"与 <img一旦 ckeditor 实例准备就绪，在源代码中:

CKEDITOR.instances.editor1.on('instanceReady', function() {
    this.setData(this.getData().replace("<img /=\"/\"", "<img"))
})

这样您就不需要遍历“后台”中的所有数据，并且会为您需要编辑的每个文档“即时”完成替换。

你可以检查这个jsfiddle:
https://jsfiddle.net/k1ewc29p/