Question

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

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

而不是显示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;

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

Answer 1

我做错了什么？

您尝试直接从可编辑元素获取HTML，而不是从编辑器中获取数据。这是两件完全不同的事情。除非您为CKEditor编写插件，否则CKEditor中的内容并不是您感兴趣的内容。您希望使用editor.getData()以及所有数据来获取数据。

Answer 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'});
        }
    };

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

2 个答案: