Using flash plugin with inline ckeditor

Question

I am using inline ckeditor version 4.0.2 and trying to embed a flash object(ooyala video) using the flash plugin. After adding the url I see a image "Flash" instead of the video. Also, after saving the code I still see the same image instead of the video.

here is the code of that flash image

<img class="cke_flash" data-cke-realelement="the real element code" data-cke-real-node-type="1" alt="Flash Animation" title="Flash Animation" align="absMiddle" src="http://localhost:3000/javascripts/lib/ckeditor_4.0.2/plugins/fakeobjects/images/spacer.gif?t=D26D" data-cke-real-element-type="flash" data-cke-resizable="true">

How can i see the actual video instead of this image?

Answer 1

You cannot see the flash video in the editor on purpose. It is replaced by dummy image to secure editor's contents and to make sure that clicking (or other interaction) with embedded object doesn't break the editor. Flash can go fullscreen, load lots of data, make noise or anything else that, generally speaking, is undesired while working in the editor.

Once you get data from the editor, your flash is converted to desired markup, i.e.:

<p>
   <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0">
      <param name="quality" value="high" />
      <param name="movie" value="someFlashToBeLoaded.swf" />
      <embed pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" src="qwe.swf" type="application/x-shockwave-flash"></embed>
   </object>
</p>

Just make sure that you get editor's data with CKEDITOR.instances.yourInstance.getData(). Never directly with element.innerHTML, $('ckeditor').html() or similar.

What you have in editor's DOM is not what you get with editor.getData(). This is because because editor performs advanced processing, filtering and stuff to return a valid HTML, including your flash embedding markup.

See more in docs.