Creating a fake image for a CKEditor custom Plugin - plugins

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