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

Ckeditor 4 is removing the <img> tag if the HTML is not correct. How to stop this behaviour

我们正在项目中使用 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 点。我一直在搜索并尝试几个配置设置，但未能确定。

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

如果您确实需要，可以将 img 标签内的所有代码设置为 "protected"，这样编辑器就不会删除此代码：

CKEDITOR.config.protectedSource.push(/<img \/="\/" .*?>/g)
  1. 请记住，您的最终 html 将无效。
  2. 由于那部分代码是 "protected" 您将不会在编辑器中看到这些图像。

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

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

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

这样您就不需要遍历 "backround" 中的所有数据，并且会为您需要编辑的每个文档完成 "on the fly" 替换。

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