使用 iFrame 进行 Ckeditor 4+ 内联编辑：代码未正确编写答案

【问题标题】：Ckeditor 4+ Inline editing with iFrame: Code is not being written properly使用 iFrame 进行 Ckeditor 4+ 内联编辑：代码未正确编写
【发布时间】：2015-05-13 13:41:07
【问题描述】：

我正在使用 Ckeditor 4+ 进行内联编辑。当更改应用到具有 contenteditable 属性的 div 时，它们会被写入数据库。

当我想显示内容时（现在没有内联编辑器），iFrame 无法正确显示。

不显示 iFrame 标签，而是显示 img 标签产生。据我了解，内联编辑时使用 img 标签不显示 iFrame 的内容。

当我将以下 iFrame 放入数据库时，

<iframe src="//www.youtube.com/embed/VIDEOLINK" frameborder="0" allowfullscreen=""></iframe>

然后在内联编辑器中显示它，它显示了img标签。当我编辑内容并将其保存到数据库时，正在生成以下代码：

<img 
 class="cke_iframe" 
 data-cke-realelement="%3Ciframe%20src%3D%22%2F%2Fwww.youtube.com%2Fembed%2FVIDEOLINK%22%20frameborder%3D%220%22%20allowfullscreen%3D%22%22%3E%3C%2Fiframe%3E"
 data-cke-real-node-type="1" 
 alt="IFrame" 
 title="IFrame" 
 align=""
 src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==" 
 data-cke-real-element-type="iframe" 
 data-cke-resizable="true">

而不是 iFrame 标记。

我在 config.js 文件中添加了以下行：

config.allowedContent = true;

我做错了什么？感谢您的帮助。

【问题讨论】：

标签： iframe ckeditor inline wysiwyg editing

【解决方案1】：

我做错了什么？

您正在尝试直接从可编辑元素获取 HTML，而不是从编辑器获取数据。这是两个完全不同的东西。 CKEditor 里面的东西不是你感兴趣的，除非你当然是在为 CKEditor 写一个插件。您想使用editor.getData() 获取数据，仅此而已。

【讨论】：

【解决方案2】：

在 config.js 中

   CKEDITOR.plugins.registered['save']={
        init : function( editor ){
            var command = editor.addCommand( 'save', {
                modes : { wysiwyg:1, source:1 },
                exec : function( editor, bla ) {
                    //saveEditor(editor.document.getBody().getHtml());
                    saveEditor(editor.getData());
                }
            });
        editor.ui.addButton( 'Save',{label : '',command : 'save'});
        }
    };

【讨论】：