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。请注意，如果您想让编辑器保持活动状态（即“自动保存”），则可能无法解决此问题。

CKEditor - 保存多个contenteditable - Divs剥离

1 个答案: