Ckeditor 4+ Встроенное редактирование с iFrame: код не пишется правильно

Question

Я использую Ckeditor 4+ для встроенного редактирования. Когда изменения применяются к div с атрибутом contenteditable, они записываются в базу данных.

Когда я хочу отобразить содержимое (теперь без встроенного редактора), 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'});
        }
    };