Question

I am developing a plugin for video embedding, I put this code when the plugin dialog OK button is clicked.

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);

Now when double click on the iframe in the editor open the iframe properties dialog not my plugin dialog.

How I can develop a fake image for my custom plugin.

Answer 1

I have found a solution for it.
Ckeditor make fake elements from the code generated by the plugins. When the editor loads it takes the code and convert it to fake elements and the default editing is worked on that fake elements the code for it will be defined in the

afterInit : function( editor )
    {

function of the the editor and will be called in on OK event of the edior

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

The Code for the fake element example is the following, I have created for an audio embed code plugin

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