Inserting (and maintaining fake element placeholders)

my

*bump*

Anything new about that? I'm still trying to get this, cause I have to finish that System with the editor next week or my client will be very angry...

lbrinkma wrote:*bump*

Anything new about that? I'm still trying to get this, cause I have to finish that System with the editor next week or my client will be very angry...

I'm doing something similar and your suggestion about adding a rule to dataFilter was enough for me. What is it that you need?

hi geecu,

I don't know how to write a data filter. That was the problem i had. Can you please share the data filter code you have used with us?

lbrinkma

I have the same problem,

I created a plugin that inserts an iframe in source, and shows a fake object in the html view. But when I go to the source view, and than back to the html view, the fake object is gone and I see my iframe.

Is there an event listener that can be attached on this action, so I can re-parse my source and render the fake object again, instead the iframe.

I recommend looking at the source code of plugin.js for the flash plugin. I modified the filter there to create a video plugin which uses fake objects.

specifically, if you defined your plugin...

init : function( editor )
{
   //This is all the init code where you define contextMenu handlers and double click listeners
},
//Add a filter for when we switch from source to HTML mode...this will preserve the "Fake" video element
//Note the 4 at the end, the filter in the flash plugin has a vlue of 5, so we only need a 4 to slip in before
afterInit : function( editor )
{
   var dataProcessor = editor.dataProcessor,
      dataFilter = dataProcessor && dataProcessor.dataFilter;

   if ( dataFilter )
   {
      //Here we want to add a new filter rule...if the source matches this property, it will be converted
      dataFilter.addRules(
         {
            elements :
            {
               'cke:embed' : function( element )
               {
                  //This function is defined outside, we just return null if this element isn't what we want
                  if ( !isVideoEmbed( element ) )
                     return null;
                  //Otherwise, we return a fake element, this is the element that will be shown in WYSIWYG mode
                  return createFakeElement( editor, element );
               }
            }
         },
         4);
   }
}

Now in the same file, inside the main function() {} crap on the same level (But outside of CKEDITOR.plugins.add), I've defined those functions I used in the above code.

function cssifyLength( length )
   {
      if ( numberRegex.test( length ) )
         return length + 'px';
      return length;
   }

   //This needs to be buffed to seperate from flash elements better
   function isVideoEmbed( element )
   {
      var attributes = element.attributes;

      return ( attributes.flashvars != '' );
   }

   function createFakeElement( editor, realElement )
   {
      var fakeElement = editor.createFakeParserElement( realElement, 'cke_flash', 'video', true ),
         fakeStyle = fakeElement.attributes.style || '';

      var width = realElement.attributes.width,
         height = realElement.attributes.height;

      if ( typeof width != 'undefined' )
         fakeStyle = fakeElement.attributes.style = fakeStyle + 'width:' + cssifyLength( width ) + ';';

      if ( typeof height != 'undefined' )
         fakeStyle = fakeElement.attributes.style = fakeStyle + 'height:' + cssifyLength( height ) + ';';

      return fakeElement;
   }

Hope that helps with figuring out how to add filters. The actual parsing of data onto and off of the fake element is usually on the dialog file. I again recommend looking at flash.js for more on that.

(function()
{
   var wmvFilenameRegex = /\.wmv(?:$|\?)/i,
      numberRegex = /^\d+(?:\.\d+)?$/;

   function cssifyLength( length )
   {
      if ( numberRegex.test( length ) )
         return length + 'px';
      return length;
   }

   function isWMVEmbed( element )
   {
      var attributes = element.attributes;

      return ( attributes.type == 'application/x-ms-wmp' || wmvFilenameRegex.test( attributes.src || '' ) );
   }

   function createFakeElement( editor, realElement )
   {
      var fakeElement = editor.createFakeParserElement( realElement, 'cke_wmv', 'WMVDialog', true ),
         fakeStyle = fakeElement.attributes.style || '';

      var width = realElement.attributes.width,
         height = realElement.attributes.height;

      if ( typeof width != 'undefined' )
         fakeStyle = fakeElement.attributes.style = fakeStyle + 'width:' + cssifyLength( width ) + ';';

      if ( typeof height != 'undefined' )
         fakeStyle = fakeElement.attributes.style = fakeStyle + 'height:' + cssifyLength( height ) + ';';

      return fakeElement;
   }

   CKEDITOR.plugins.add( 'WMV',
   {
      init : function( editor )
      {
         editor.addCommand( 'WMV', new CKEDITOR.dialogCommand( 'WMVDialog' ) );
         editor.ui.addButton( 'WMV',
            {
                         label: 'Windows Media Video',
                         command: 'WMV',
                         icon: this.path + 'images/icon_wmv.gif'
            });
         CKEDITOR.dialog.add( 'WMVDialog', this.path + 'dialogs/wmv.js' );

         editor.addCss(
            'img.cke_wmv' +
            '{' +
               'background-image: url(' + CKEDITOR.getUrl( this.path + 'images/placeholder.png' ) + ');' +
               'background-position: center center;' +
               'background-repeat: no-repeat;' +
               'border: 1px solid #a9a9a9;' +
               'width: 80px;' +
               'height: 80px;' +
            '}'
            );

         // If the "menu" plugin is loaded, register the menu items.
         if ( editor.addMenuItems )
         {
            editor.addMenuItems(
               {
                  wmv :
                  {
                     label : 'Windows Movie Video',
                     command : 'WMV',
                     group : 'WMV'
                  }
               });
         }

         editor.on( 'doubleclick', function( evt )
            {
               var element = evt.data.element;

               if ( element.is( 'img' ) && element.getAttribute( '_cke_real_element_type' ) == 'WMV' )
                  evt.data.dialog = 'WMVDialog';
            });

         // If the "contextmenu" plugin is loaded, register the listeners.
         if ( editor.contextMenu )
         {
            editor.contextMenu.addListener( function( element, selection )
               {
                  if ( element && element.is( 'img' ) && !element.isReadOnly()
                        && element.getAttribute( '_cke_real_element_type' ) == 'WMV' )
                     return { wmv : CKEDITOR.TRISTATE_OFF };
               });
         }
      },

      afterInit : function( editor )
      {
         var dataProcessor = editor.dataProcessor,
            dataFilter = dataProcessor && dataProcessor.dataFilter;

         if ( dataFilter )
         {
            dataFilter.addRules(
               {
                  elements :
                  {
                     'cke:object' : function( element )
                     {
                        var attributes = element.attributes,
                           classId = attributes.classid && String( attributes.classid ).toLowerCase();

                        if ( !classId )
                        {
                           // Look for the inner <embed>
                           for ( var i = 0 ; i < element.children.length ; i++ )
                           {
                              if ( element.children[ i ].name == 'cke:embed' )
                              {
                                 if ( !isWMVEmbed( element.children[ i ] ) )
                                    return null;

                                 return createFakeElement( editor, element );
                              }
                           }
                           return null;
                        }

                        return createFakeElement( editor, element );
                     },

                     'cke:embed' : function( element )
                     {

                        if ( !isWMVEmbed( element ) )
                           return null;

                        return createFakeElement( editor, element );
                     }
                  }
               },
               5);
         }
      },

      requires : [ 'fakeobjects' ]
   });
})();

CKEDITOR.tools.extend( CKEDITOR.config,
{
   /**
    * Save as EMBED tag only. This tag is unrecommended.
    * @type Boolean
    * @default false
    */
   wmvEmbedTagOnly : false,

   /**
    * Add EMBED tag as alternative: &lt;object&gt&lt;embed&gt&lt;/embed&gt&lt;/object&gt
    * @type Boolean
    * @default false
    */
   wmvAddEmbedTag : true,

   /**
    * Use embedTagOnly and addEmbedTag values on edit.
    * @type Boolean
    * @default false
    */
   wmvConvertOnEdit : false
} );

(function()
{
   /*
    * It is possible to set things in three different places.
    * 1. As attributes in the object tag.
    * 2. As param tags under the object tag.
    * 3. As attributes in the embed tag.
    * It is possible for a single attribute to be present in more than one place.
    * So let's define a mapping between a sementic attribute and its syntactic
    * equivalents.
    * Then we'll set and retrieve attribute values according to the mapping,
    * instead of having to check and set each syntactic attribute every time.
    *
    * Reference: http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_12701
    */
   var ATTRTYPE_OBJECT = 1,
      ATTRTYPE_PARAM = 2,
      ATTRTYPE_EMBED = 4;

   var attributesMap =
   {
      id : [ { type : ATTRTYPE_OBJECT, name :  'id' } ],
      classid : [ { type : ATTRTYPE_OBJECT, name : 'classid' } ],
      codebase : [ { type : ATTRTYPE_OBJECT, name : 'codebase'} ],
      pluginspage : [ { type : ATTRTYPE_EMBED, name : 'pluginspage' } ],
      src : [ { type : ATTRTYPE_PARAM, name : 'FileName' }, { type : ATTRTYPE_EMBED, name : 'src' } ],
      name : [ { type : ATTRTYPE_EMBED, name : 'name' } ],
      align : [ { type : ATTRTYPE_OBJECT, name : 'align' } ],
      title : [ { type : ATTRTYPE_OBJECT, name : 'title' }, { type : ATTRTYPE_EMBED, name : 'title' } ],
      'class' : [ { type : ATTRTYPE_OBJECT, name : 'class' }, { type : ATTRTYPE_EMBED, name : 'class'} ],
      width : [ { type : ATTRTYPE_OBJECT, name : 'width' }, { type : ATTRTYPE_EMBED, name : 'width' } ],
      height : [ { type : ATTRTYPE_OBJECT, name : 'height' }, { type : ATTRTYPE_EMBED, name : 'height' } ],
      hSpace : [ { type : ATTRTYPE_OBJECT, name : 'hSpace' }, { type : ATTRTYPE_EMBED, name : 'hSpace' } ],
      vSpace : [ { type : ATTRTYPE_OBJECT, name : 'vSpace' }, { type : ATTRTYPE_EMBED, name : 'vSpace' } ],
      style : [ { type : ATTRTYPE_OBJECT, name : 'style' }, { type : ATTRTYPE_EMBED, name : 'style' } ],
      type : [ { type : ATTRTYPE_EMBED, name : 'type' } ]
   };

   var names = [ 'showdisplay', 'ShowControls', 'loop', 'AutoStart', 'quality', 'scale', 'salign', 'wmode', 'bgcolor', 'base', 'WMVvars', 'allowScriptAccess',
      'showstatusbar' ];
   for ( var i = 0 ; i < names.length ; i++ )
      attributesMap[ names[i] ] = [ { type : ATTRTYPE_EMBED, name : names[i] }, { type : ATTRTYPE_PARAM, name : names[i] } ];
   names = [ 'showdisplay', 'showstatusbar', 'ShowControls', 'loop', 'AutoStart' ];

// This section is not needed as we want all values to be displayed true or false
//   for ( i = 0 ; i < names.length ; i++ )
//      attributesMap[ names[i] ][0]['default'] = attributesMap[ names[i] ][1]['default'] = false;

   function loadValue( objectNode, embedNode, paramMap )
   {
      var attributes = attributesMap[ this.id ];
      if ( !attributes )
         return;

      var isCheckbox = ( this instanceof CKEDITOR.ui.dialog.checkbox );
      for ( var i = 0 ; i < attributes.length ; i++ )
      {
         var attrDef = attributes[ i ];
         switch ( attrDef.type )
         {
            case ATTRTYPE_OBJECT:
               if ( !objectNode )
                  continue;
               if ( objectNode.getAttribute( attrDef.name ) !== null )
               {
                  var value = objectNode.getAttribute( attrDef.name );
                  if ( isCheckbox )
                     this.setValue( value.toLowerCase() == 'true' );
                  else
                     this.setValue( value );
                  return;
               }
               else if ( isCheckbox )
                  this.setValue( !!attrDef[ 'default' ] );
               break;
            case ATTRTYPE_PARAM:
               if ( !objectNode )
                  continue;
               if ( attrDef.name in paramMap )
               {
                  value = paramMap[ attrDef.name ];
                  if ( isCheckbox )
                     this.setValue( value.toLowerCase() == 'true' );
                  else
                     this.setValue( value );
                  return;
               }
               else if ( isCheckbox )
                  this.setValue( !!attrDef[ 'default' ] );
               break;
            case ATTRTYPE_EMBED:
               if ( !embedNode )
                  continue;
               if ( embedNode.getAttribute( attrDef.name ) )
               {
                  value = embedNode.getAttribute( attrDef.name );
                  if ( isCheckbox )
                     this.setValue( value.toLowerCase() == 'true' );
                  else
                     this.setValue( value );
                  return;
               }
               else if ( isCheckbox )
                  this.setValue( !!attrDef[ 'default' ] );
         }
      }
   }

   function commitValue( objectNode, embedNode, paramMap )
   {
      var attributes = attributesMap[ this.id ];
      if ( !attributes )
         return;

      var isRemove = ( this.getValue() === '' ),
         isCheckbox = ( this instanceof CKEDITOR.ui.dialog.checkbox );

      for ( var i = 0 ; i < attributes.length ; i++ )
      {
         var attrDef = attributes[i];
         switch ( attrDef.type )
         {
            case ATTRTYPE_OBJECT:
               if ( !objectNode )
                  continue;
               var value = this.getValue();
               if ( isRemove || isCheckbox && value === attrDef[ 'default' ] )
                  objectNode.removeAttribute( attrDef.name );
               else
                  objectNode.setAttribute( attrDef.name, value );
               break;
            case ATTRTYPE_PARAM:
               if ( !objectNode )
                  continue;
               value = this.getValue();
               if ( isRemove || isCheckbox && value === attrDef[ 'default' ] )
               {
                  if ( attrDef.name in paramMap )
                     paramMap[ attrDef.name ].remove();
               }
               else
               {
                  if ( attrDef.name in paramMap )
                     paramMap[ attrDef.name ].setAttribute( 'value', value );
                  else
                  {
                     var param = CKEDITOR.dom.element.createFromHtml( '<cke:param></cke:param>', objectNode.getDocument() );
                     param.setAttributes( { name : attrDef.name, value : value } );
                     if ( objectNode.getChildCount() < 1 )
                        param.appendTo( objectNode );
                     else
                        param.insertBefore( objectNode.getFirst() );
                  }
               }
               break;
            case ATTRTYPE_EMBED:
               if ( !embedNode )
                  continue;
               value = this.getValue();
               if ( isRemove || isCheckbox && value === attrDef[ 'default' ])
                  embedNode.removeAttribute( attrDef.name );
               else
                  embedNode.setAttribute( attrDef.name, value );
         }
      }
   }

   CKEDITOR.dialog.add( 'WMVDialog', function( editor )
   {
      var makeObjectTag = !editor.config.wmvEmbedTagOnly,
         makeEmbedTag = editor.config.wmvAddEmbedTag || editor.config.wmvEmbedTagOnly;

      var previewPreloader,
         previewAreaHtml = '<div>' + CKEDITOR.tools.htmlEncode( editor.lang.common.preview ) +'<br>' +
         '<div id="cke_WmvPreviewLoader' + CKEDITOR.tools.getNextNumber() + '" style="display:none"><div class="loading">&nbsp;</div></div>' +
         '<div id="cke_WmvPreviewBox' + CKEDITOR.tools.getNextNumber() + '" class="FlashPreviewBox"></div></div>';

      return {
         title : 'Windows Media Video',
         minWidth : 420,
         minHeight : 310,
         onShow : function()
         {
            // Clear previously saved elements.
            this.fakeImage = this.objectNode = this.embedNode = null;
            previewPreloader = new CKEDITOR.dom.element( 'embed', editor.document );

            // Try to detect any embed or object tag that has WMV parameters.
            var fakeImage = this.getSelectedElement();
            if ( fakeImage && fakeImage.getAttribute( '_cke_real_element_type' ) && fakeImage.getAttribute( '_cke_real_element_type' ) == 'wmv' )
            {
               this.fakeImage = fakeImage;

               var realElement = editor.restoreRealElement( fakeImage ),
                  objectNode = null, embedNode = null, paramMap = {};
               if ( realElement.getName() == 'cke:object' )
               {
                  objectNode = realElement;
                  var embedList = objectNode.getElementsByTag( 'embed', 'cke' );
                  if ( embedList.count() > 0 )
                     embedNode = embedList.getItem( 0 );
                  var paramList = objectNode.getElementsByTag( 'param', 'cke' );
                  for ( var i = 0, length = paramList.count() ; i < length ; i++ )
                  {
                     var item = paramList.getItem( i ),
                        name = item.getAttribute( 'name' ),
                        value = item.getAttribute( 'value' );
                     paramMap[ name ] = value;
                  }
               }
               else if ( realElement.getName() == 'cke:embed' )
                  embedNode = realElement;

               this.objectNode = objectNode;
               this.embedNode = embedNode;

               this.setupContent( objectNode, embedNode, paramMap, fakeImage );
            }
         },
         onOk : function()
         {
            // If there's no selected object or embed, create one. Otherwise, reuse the
            // selected object and embed nodes.
            var objectNode = null,
               embedNode = null,
               paramMap = null;
            if ( !this.fakeImage )
            {
               if ( makeObjectTag )
               {
                  objectNode = CKEDITOR.dom.element.createFromHtml( '<cke:object></cke:object>', editor.document );
                  var attributes = {
                     classid : 'clsid:22d6f312-b0f6-11d0-94ab-0080c74c7e95',
                     codebase : 'https://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701'
                  };
                  objectNode.setAttributes( attributes );
               }
               if ( makeEmbedTag )
               {
                  embedNode = CKEDITOR.dom.element.createFromHtml( '<cke:embed></cke:embed>', editor.document );
                  embedNode.setAttributes(
                     {   
                        type : 'application/x-ms-wmp',
                        pluginspage : 'https://www.microsoft.com/Windows/MediaPlayer/'
                     } );
                  if ( objectNode )
                     embedNode.appendTo( objectNode );
               }
            }
            else
            {
               objectNode = this.objectNode;
               embedNode = this.embedNode;
            }

            // Produce the paramMap if there's an object tag.
            if ( objectNode )
            {
               paramMap = {};
               var paramList = objectNode.getElementsByTag( 'param', 'cke' );
               for ( var i = 0, length = paramList.count() ; i < length ; i++ )
                  paramMap[ paramList.getItem( i ).getAttribute( 'name' ) ] = paramList.getItem( i );
            }

            // A subset of the specified attributes/styles
            // should also be applied on the fake element to
            // have better visual effect. (#5240)
            var extraStyles = {}, extraAttributes = {};
            this.commitContent( objectNode, embedNode, paramMap, extraStyles, extraAttributes );

            // Refresh the fake image.
            var newFakeImage = editor.createFakeElement( objectNode || embedNode, 'cke_wmv', 'wmv', true );
            newFakeImage.setAttributes( extraAttributes );
            newFakeImage.setStyles( extraStyles );
            if ( this.fakeImage )
            {
               newFakeImage.replace( this.fakeImage );
               editor.getSelection().selectElement( newFakeImage );
            }
            else
               editor.insertElement( newFakeImage );
         },

         onHide : function()
         {
            if ( this.preview )
               this.preview.setHtml('');
         },

         contents : [
            {
               id : 'info',
               label : editor.lang.common.generalTab,
               accessKey : 'I',
               elements :
               [
                  {
                     type : 'vbox',
                     padding : 0,
                     children :
                     [
                        {
                           type : 'hbox',
                           widths : [ '280px', '110px' ],
                           align : 'right',
                           children :
                           [
                              {
                                 id : 'src',
                                 type : 'text',
                                 label : editor.lang.common.url,
                                 required : true,
                                 validate : CKEDITOR.dialog.validate.notEmpty( editor.lang.flash.validateSrc ),
                                 setup : loadValue,
                                 commit : commitValue,
                                 onLoad : function()
                                 {
                                    var dialog = this.getDialog(),
                                    updatePreview = function( src ){
                                       // Query the preloader to figure out the url impacted by based href.
                                       previewPreloader.setAttribute( 'src', src );
                                       dialog.preview.setHtml( '<embed height="100%" width="100%" src="'
                                          + CKEDITOR.tools.htmlEncode( previewPreloader.getAttribute( 'src' ) )
                                          + '" type="application/x-ms-wmp"></embed>' );
                                    };
                                    // Preview element
                                    dialog.preview = dialog.getContentElement( 'info', 'preview' ).getElement().getChild( 3 );

                                    // Sync on inital value loaded.
                                    this.on( 'change', function( evt ){

                                          if ( evt.data && evt.data.value )
                                             updatePreview( evt.data.value );
                                       } );
                                    // Sync when input value changed.
                                    this.getInputElement().on( 'change', function( evt ){

                                       updatePreview( this.getValue() );
                                    }, this );
                                 }
                              },
                              {
                                 type : 'button',
                                 id : 'browse',
                                 filebrowser : 'info:src',
                                 hidden : true,
                                 // v-align with the 'src' field.
                                 // TODO: We need something better than a fixed size here.
                                 style : 'display:inline-block;margin-top:10px;',
                                 label : editor.lang.common.browseServer
                              }
                           ]
                        }
                     ]
                  },
                  {
                     type : 'hbox',
                     widths : [ '25%', '25%', '25%', '25%', '25%' ],
                     children :
                     [
                        {
                           type : 'text',
                           id : 'width',
                           'default' : 300,
                           style : 'width:95px',
                           label : editor.lang.flash.width,
                           validate : CKEDITOR.dialog.validate.integer( editor.lang.flash.validateWidth ),
                           setup : function( objectNode, embedNode, paramMap, fakeImage )
                           {
                              loadValue.apply( this, arguments );
                              if ( fakeImage )
                              {
                                 var fakeImageWidth = parseInt( fakeImage.$.style.width, 10 );
                                 if ( !isNaN( fakeImageWidth ) )
                                    this.setValue( fakeImageWidth );
                              }
                           },
                           commit : function( objectNode, embedNode, paramMap, extraStyles )
                           {
                              commitValue.apply( this, arguments );
                              if ( this.getValue() )
                                 extraStyles.width = this.getValue() + 'px';
                           }
                        },
                        {
                           type : 'text',
                           id : 'height',
                           'default' : 220,
                           style : 'width:95px',
                           label : editor.lang.flash.height,
                           validate : CKEDITOR.dialog.validate.integer( editor.lang.flash.validateHeight ),
                           setup : function( objectNode, embedNode, paramMap, fakeImage )
                           {
                              loadValue.apply( this, arguments );
                              if ( fakeImage )
                              {
                                 var fakeImageHeight = parseInt( fakeImage.$.style.height, 10 );
                                 if ( !isNaN( fakeImageHeight ) )
                                    this.setValue( fakeImageHeight );
                              }
                           },
                           commit : function( objectNode, embedNode, paramMap, extraStyles )
                           {
                              commitValue.apply( this, arguments );
                              if ( this.getValue() )
                                 extraStyles.height = this.getValue() + 'px';
                           }
                        },
                        {
                           type : 'text',
                           id : 'hSpace',
                           style : 'width:95px',
                           label : editor.lang.flash.hSpace,
                           validate : CKEDITOR.dialog.validate.integer( editor.lang.flash.validateHSpace ),
                           setup : loadValue,
                           commit : commitValue
                        },
                        {
                           type : 'text',
                           id : 'vSpace',
                           style : 'width:95px',
                           label : editor.lang.flash.vSpace,
                           validate : CKEDITOR.dialog.validate.integer( editor.lang.flash.validateVSpace ),
                           setup : loadValue,
                           commit : commitValue
                        }
                     ]
                  },

                  {
                     type : 'vbox',
                     children :
                     [
                        {
                           type : 'html',
                           id : 'preview',
                           style : 'width:95%;',
                           html : previewAreaHtml
                        }
                     ]
                  }
               ]
            },
            {
               id : 'Upload',
               hidden : true,
               filebrowser : 'uploadButton',
               label : editor.lang.common.upload,
               elements :
               [
                  {
                     type : 'file',
                     id : 'upload',
                     label : editor.lang.common.upload,
                     size : 38
                  },
                  {
                     type : 'fileButton',
                     id : 'uploadButton',
                     label : editor.lang.common.uploadSubmit,
                     filebrowser : 'info:src',
                     'for' : [ 'Upload', 'upload' ]
                  }
               ]
            },
            {
               id : 'properties',
               label : editor.lang.flash.propertiesTab,
               elements :
               [
                  {
                     type : 'hbox',
                     widths : [ '50%', '50%' ],
                     children :
                     [
                        {
                           id : 'align',
                           type : 'select',
                           label : editor.lang.flash.align,
                           'default' : '',
                           style : 'width : 100%;',
                           items :
                           [
                              [ editor.lang.common.notSet , ''],
                              [ editor.lang.flash.alignRight , 'right'],
                              [ editor.lang.flash.alignLeft , 'left']
                           ],
                           setup : loadValue,
                           commit : function( objectNode, embedNode, paramMap, extraStyles, extraAttributes )
                           {
                              var value = this.getValue();
                              commitValue.apply( this, arguments );
                              value && ( extraAttributes.align = value );
                           }
                        },
                        {
                           type : 'html',
                           html : '<div></div>'
                        }
                     ]
                  },
                  {
                     type : 'fieldset',
                     label : CKEDITOR.tools.htmlEncode( 'variables for WMV files' ),
                     children :
                     [
                        {
                           type : 'vbox',
                           padding : 0,
                           children :
                           [
                              {
                                 type : 'checkbox',
                                 id : 'AutoStart',
                                 label : 'Auto Start',
                                 'default' : false,
                                 setup : loadValue,
                                 commit : commitValue
                              },
                              {
                                 type : 'checkbox',
                                 id : 'ShowControls',
                                 label : 'Show Controls',
                                 'default' : true,
                                 setup : loadValue,
                                 commit : commitValue
                              },
                              {
                                 type : 'checkbox',
                                 id : 'loop',
                                 label : 'Loop',
                                 'default' : false,
                                 setup : loadValue,
                                 commit : commitValue
                              },
                              {
                                 type : 'checkbox',
                                 id : 'showstatusbar',
                                 label : 'Show Status Bar',
                                 'default' : false,
                                 setup : loadValue,
                                 commit : commitValue
                              },
                              {
                                 type : 'checkbox',
                                 id : 'showdisplay',
                                 label : 'Show Display',
                                 'default' : false,
                                 setup : loadValue,
                                 commit : commitValue
                              }

                           ]
                        }
                     ]
                  }
               ]
            },
            {
               id : 'advanced',
               label : editor.lang.common.advancedTab,
               elements :
               [
                  {
                     type : 'hbox',
                     widths : [ '45%', '55%' ],
                     children :
                     [
                        {
                           type : 'text',
                           id : 'id',
                           label : editor.lang.common.id,
                           setup : loadValue,
                           commit : commitValue
                        },
                        {
                           type : 'text',
                           id : 'title',
                           label : editor.lang.common.advisoryTitle,
                           setup : loadValue,
                           commit : commitValue
                        }
                     ]
                  },
                  {
                     type : 'hbox',
                     widths : [ '45%', '55%' ],
                     children :
                     [
                        {
                           type : 'text',
                           id : 'bgcolor',
                           label : editor.lang.flash.bgcolor,
                           setup : loadValue,
                           commit : commitValue
                        },
                        {
                           type : 'text',
                           id : 'class',
                           label : editor.lang.common.cssClass,
                           setup : loadValue,
                           commit : commitValue
                        }
                     ]
                  },
                  {
                     type : 'text',
                     id : 'style',
                     label : editor.lang.common.cssStyle,
                     setup : loadValue,
                     commit : commitValue
                  }
               ]
            }
         ]
      };
   } );
})();

removePlugins: 'Flash,elementspath',

<img class="cke_flash" src="/private/blogs/ckeditor/images/spacer.gif?t=AA4E4NT" _cke_realelement="%3Ccke%3Aobject%20height%3D%22220%22%20align%3D%22left%22%20width%3D%22300%22%20classid%3D%22clsid%3A22d6f312-b0f6-11d0-94ab-0080c74c7e95%22%20codebase%3D%22https%3A%2F%2Factivex.microsoft.com%2Factivex%2Fcontrols%2Fmplayer%2Fen%2Fnsmp2inf.cab%23Version%3D5%2C1%2C52%2C701%22%3E%20%3Ccke%3Aembed%20height%3D%22220%22%20width%3D%22300%22%20type%3D%22application%2Fx-ms-wmp%22%20src%3D%22%2Fprivate%2Fflightdeck%2Fvideo%2FAATIS.wmv%22%20showstatusbar%3D%22false%22%20showdisplay%3D%22false%22%20showcontrols%3D%22true%22%20pluginspage%3D%22https%3A%2F%2Fwww.microsoft.com%2FWindows%2FMediaPlayer%2F%22%20loop%3D%22false%22%20autostart%3D%22false%22%3E%3C%2Fcke%3Aembed%3E%3C%2Fcke%3Aobject%3E" _cke_real_node_type="1" alt="Flash Animation" align="left" _cke_real_element_type="flash" _cke_resizable="true" style="width:300px;height:220px;" />

As a follow-up I used a brute force method and forced the removal of the flash plugin by renaming the folder so that the editor had no way to find it. I then tried my WMV plugin to insert a movie. When I clicked the source button and then back the placeholder changed to a blank. Viewing the editor source I still see the img class being assigned cke_flash, even though the plugin did not exist. This now tells me that whatever the cause is, it is not from the plugin but maybe from the editor itself, which is compressed in a way making it hard to make changes.

Open to ideas.

OK, found out something interesting, but not sure what to make of it just yet. The following code snippet seems to allow me to change some of the behavior. Toward the end there is a number 5, which I am still unclear as to it's function. However, if I change it to the number 1, then the movie placeholder will remain if after clicking the source button and then back to editor. However, the double-click now no longer functions and if i have a Flash movie it's placeholder image now gets changed to the Movie image.

Still plugging away at it

      afterInit : function( editor )
      {
         var dataProcessor = editor.dataProcessor,
            dataFilter = dataProcessor && dataProcessor.dataFilter;

         if ( dataFilter )
         {
            dataFilter.addRules(
               {
                  elements :
                  {
                     'cke:object' : function( element )
                     {
                        var attributes = element.attributes,
                           classId = attributes.classid && String( attributes.classid ).toLowerCase();

                        if ( !classId )
                        {
                           // Look for the inner <embed>
                           for ( var i = 0 ; i < element.children.length ; i++ )
                           {
                              if ( element.children[ i ].name == 'cke:embed' )
                              {
                                 if ( !isWMVEmbed( element.children[ i ] ) )
                                    return null;

                                 return createFakeElement( editor, element );
                              }
                           }
                           return null;
                        }

                        return createFakeElement( editor, element );
                     },

                     'cke:embed' : function( element )
                     {

                        if ( !isWMVEmbed( element ) )
                           return null;

                        return createFakeElement( editor, element );
                     }
                  }
               },
               5);
         }
      },

Hi btate!

As always I've no time to spend on this and that is the reason for the late reply.

And again this is an yet another guess. It's clear that you loose the placeholder image. You could try adding the flash plugin again and edit that dataProcessor.

The real problem is that Fake Element is not document enough, as far as I remember. This should have changed now, but I don't think so.

lbrinkma

Anthing new on this?

I've got the same problem....

anybody knows a solution to this?
I'm trying to find a solution second day with few results..

I also found out that flash plugin seems to overwrite the rule for 'cke:embed' element.
Even though the function addRules does take priority as a second argument it seems to be ignored. Probably it's a bug.

The only way I found out how to overwrite a rule for 'cke:embed' element was to remove a part of code from ckeditor.js which is very bad way to do this I guess.