Создание поддельного изображения для пользовательского плагина CKEditor

Question

Я разрабатываю плагин для встраивания видео, я помещаю этот код, когда кнопка OK диалогового окна плагина нажата.

var embedCode = 
    '<iframe title="YouTube video player" class="youtube-player" type="text/html"' +
        width="' + width + '" height="' + height + '" src="http://www.youtube.com/embed/' + textField + '?rel=0"' +
        frameborder="0" width="620" height="200" style="width:' + width + 'px; height:' + height + 'px">' +
    '</iframe>';

this.getParentEditor().insertHtml(embedCode);

Теперь при двойном щелчке по iframe в редакторе откройте диалог свойств iframe, а немой диалог плагинов.

Как я могу разработать поддельное изображение для своего пользовательского плагина.

Answer 1

Я нашел решение для этого.Ckeditor делает поддельные элементы из кода, сгенерированного плагинами.Когда редактор загружает, он берет код и преобразовывает его в поддельные элементы, и для этих поддельных элементов выполняется редактирование по умолчанию, код для него будет определен в функции

afterInit : function( editor )
    {

редактора ивызывается при событии OK для edior

onOk : function()
{
    var embedCode = updatePreview( this,true );
    var newFakeImage = editor.createFakeElement( embedCode, 'cke_audio', 'audio', true  );

Код для примера поддельного элемента следующий, я создал для плагина аудио код для вставки

afterInit : function( editor )
    {
        function createFakeElement( editor, realElement )
        {
            return editor.createFakeParserElement( realElement, 'cke_audio', 'audio', true );
        }

        var dataProcessor = editor.dataProcessor,
                dataFilter = dataProcessor && dataProcessor.dataFilter;
            if ( dataFilter )
            {
                dataFilter.addRules(
                    {
                        elements :
                        {
                            'div' : function( element )
                            {
                                //alert("here");
                                var attributes = element.attributes;

                                if( attributes.class == 'audio' ){
                                    //alert("here");
                                    return createFakeElement( editor, element );
                                }
                                return null;

                            }
                        }
                    },
                    5);
            }
        }