Plugins CKEditor-保存多个内容可编辑-删除div

我有一个内联网页编辑器，允许用户编辑每个页面的内容（在div id='saveableContent'中指定）

我正在使用CKEditor 4.2.1和Youtube插件：

内联编辑器有多个contenteditable='true'div用于页面中可编辑的部分，非常类似于以下内容：

我将发布一个只有一个contenteditable div的示例，但请注意，一个页面上可能有多个。 在使用YouTube插件之前，我只需通过以下方式保存整个内容：

$('#saveableContent').html();

保持了所有代码的完整性。然而，一旦我开始使用YouTube插件，在添加YouTube视频时，它会将其显示为iFrame图像

<div aria-describedby="cke_66" title="Rich Text Editor, content" aria-label="Rich Text Editor, content" role="textbox" style="position: relative;" spellcheck="false" tabindex="0" class="entry editablecontent cke_editable cke_editable_inline cke_contents_ltr cke_show_borders cke_focus" id="content" contenteditable="true">
<!--{cke_protected}{C}%3C!%2D%2D%20Home%20page%20heading%20%2D%2D%3E--><h2>Freight</h2>
<!--{cke_protected}{C}%3C!%2D%2D%20Para%20%2D%2D%3E-->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br></p><p><span></span>
   <img class="cke_iframe" data-cke-realelement="%3Ciframe%20src%3D%22%2F%2Fwww.youtube.com%2Fembed%2F3i_bsfwPE1s%22%20allowfullscreen%3D%22%22%20frameborder%3D%220%22%20height%3D%22360%22%20width%3D%22640%22%3E%3C%2Fiframe%3E" data-cke-real-node-type="1" alt="IFrame" title="IFrame" src="http://pcbca-new.dev/ckeditor/plugins/fakeobjects/images/spacer.gif?t=D7UD" data-cke-real-element-type="iframe" data-cke-resizable="true" style="width:640px;height:360px;" align="">
   <br></p><br></div>

其中包含实际转换的iFrame代码：

<!-- Home page heading -->
<h2>Freight</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p><iframe allowfullscreen="" frameborder="0" height="360" src="//www.youtube.com/embed/3i_bsfwPE1s" width="640"></iframe><span>&nbsp;</span><span>&nbsp;</span></p>

但那没用

---

如何确保页面上的所有iFrame图像都转换为真实的iFrame代码，同时使用其所有属性维护div？

当CKEditor在运行时保护iFrame、脚本、视频和其他内容时，我可以根据您的需要找到解决问题的几种方法：

“正确的方法”：不要将

#saveableContent

的内容作为一个整体保存，而是迭代

CKEDITOR.instances

并收集

editor.getData（）

。然后，在呈现页面时，将该HTML（很可能是一个编辑器内容数组）反序列化回

#savableContent

（

editor.setData（HTML）

）中的编辑器。通过这种方式，

#savableContent

永远不会存储在数据库中，您可以控制HTML：如果需要，您可以放弃/修改/更改特定编辑器的内容

“稍微正确的方法”：迭代

CKEDITOR.instances

并收集

editor.getData（）

。将其连接到字符串

'+…+''。请注意，您的数据不再是结构化的

“讨厌的方式”：在保存

#saveableContent

的内容之前，迭代

CKEDITOR.instances

并调用

editor.destroy（）

。请注意，如果您想让编辑器保持活动状态（即“自动保存”），它可能不是您的解决方案

<!-- Home page heading -->
<h2>Freight</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p><iframe allowfullscreen="" frameborder="0" height="360" src="//www.youtube.com/embed/3i_bsfwPE1s" width="640"></iframe><span>&nbsp;</span><span>&nbsp;</span></p>

config.allowedContent = true;