plugins - CKEditor-保存多个可编辑的内容-剥离的Divs

Question

我有一个嵌入式网页编辑器，它允许用户编辑每个页面的内容(在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？

Answer 1

尽管CKEditor在运行时可以保护iframe，脚本视频和其他内容，但根据您的需求，我看到了几种解决问题的方法:

“正确的方法”:不要整体保存#saveableContent的内容，而是遍历CKEDITOR.instances并收集editor.getData()。然后，在渲染页面时，将该HTML(很可能是编辑器内容的数组)反序列化回#saveableContent(editor.setData( html ))的编辑器中。这样#saveableContent永远不会存储在数据库中，您就可以控制HTML:可以根据需要丢弃/修改/更改特定编辑器的内容。

“某种正确的方式”:遍历CKEDITOR.instances并收集editor.getData()。将其与字符串'<div id="saveableContent">' + ... + '</div>'连接。请注意，您的数据不再结构化。

“讨厌的方式”:遍历CKEDITOR.instances并调用editor.destroy()，然后再保存#saveableContent的内容。请注意，如果您想让编辑器保持 Activity 状态(即“自动保存”)，可能对您来说不是解决方案。