CKEditor - 保存多个 contenteditable - Divs 被剥离答案

【问题标题】：CKEditor - Save Multiple contenteditable - Divs Stripped OutCKEditor - 保存多个 contenteditable - Divs 被剥离
【发布时间】：2014-01-03 19:14:52
【问题描述】：

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

我正在使用 CKEditor 4.2.1 和 Youtube 插件：https://github.com/fonini/ckeditor-youtube-plugin

内联编辑器有多个 contenteditable='true' div，用于可编辑的页面部分，类似于以下内容：http://nightly.ckeditor.com/14-01-03-07-05/standard/samples/inlineall.html

我将发布一个只有一个 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 html，我需要使用

CKEDITOR.instances.content.getData();

其中包含真正转换后的 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>

但问题是，它删除了我所有包含 contenteditable='true' 的 div，因此下一轮页面被加载进行编辑，所有部分都不可编辑了。

Sooooo.... 我希望能够按原样维护所有代码 ($('#saveableContent').html();) 但同时将 iFrame 图像转换为真正的 iFrame (CKEDITOR .instances.content.getData();)。

我想也许我可以禁用 CKEditor 自动清理代码，所以我尝试了

config.allowedContent = true;

但这没有用。

如何确保页面上的所有 iFrame 图像都转换为真正的 iFrame 代码，同时保持 div 的所有属性？

【问题讨论】：

标签： plugins youtube ckeditor

【解决方案1】：

虽然 CKEditor 在运行时保护 iframe、脚本视频和其他内容，但我看到了几个解决您问题的方法，具体取决于您的需求：

“正确方式”：不要将#saveableContent的内容作为一个整体保存，而是遍历CKEDITOR.instances并收集editor.getData()。然后，在呈现页面时，将 HTML（很可能是编辑器内容数组）反序列化回 #saveableContent (editor.setData( html )) 中的编辑器。这样#saveableContent 永远不会存储在数据库中，并且您可以控制您的 HTML：如果需要，您可以丢弃/修改/更改特定编辑器的内容。
“有点正确的方法”：遍历CKEDITOR.instances 并收集editor.getData()。将其与字符串 '<div id="saveableContent">' + ... + '</div>' 连接。请注意，您的数据不再结构化。
“讨厌的方式”：在保存#saveableContent 的内容之前，遍历CKEDITOR.instances 并调用editor.destroy()。请注意，如果您想让编辑器保持活动状态（即“自动保存”），这对您来说可能没有解决方案。

【讨论】：