Media Element Integration into Ckeditor

Question

I am running into a bit of trouble the the wysiwig editor ckeditor. While trying to get away from any flash based media players, I stumbled across MediaElement (http://mediaelementjs.com/), which has been suggested as a good alternative for playing audio and video ( http://drupal.org/node/1035630 ).

Is there an easy way to integrate this player into a media plugin? I imagine that there should be a way to swap out a flash based player for media element..?

Thoughts?

Answer 1

You can create a custom plugin based on the flash plugin.

Capitalization matters, here's the style guide: Coding Style Guidelines http://docs.cksource.com/FCKeditor_3.x/Design_and_Architecture/Coding_Style

Copy the _source/plugins/flash directory and rename it, let's call it mediaelement.

Place the renamed directory here /plugins/mediaelement.

Then rename /plugins/mediaelement/dialogs/flash.js to mediaelement.js.

Add your 16px X 16px toolbar button image to the /plugins/mediaelement/images/ directory.
I know .png files work, haven't tried others.

---

Config:
Load the new plugin in your config:

config.extraPlugins = 'mediaelement';

Add the button to your toolbar config setting 'MediaElement'

config.toolbar_xxx

---

File modifications
You'll need to change the references to the "flash" plugin name and files. Here are the minimal changes needed to get the plugin loaded and the dialog window to open:

plugins/mediaelement/dialogs/mediaelement.js (174)

CKEDITOR.dialog.add( 'mediaelement', function( editor )

plugins/mediaelement/plugin.js (22 - 33)

  CKEDITOR.plugins.add( 'mediaelement',
  {
    init : function( editor )
    {
      editor.addCommand( 'mediaelement', new CKEDITOR.dialogCommand( 'mediaelement' ) );
      editor.ui.addButton( 'MediaElement',
        {
          label : 'Media Element',
          command : 'mediaelement',
          icon: this.path + 'images/mediaelement_btn.png'
        });
      CKEDITOR.dialog.add( 'mediaelement', this.path + 'dialogs/mediaelement.js' );

There are a few tutorials on creating plugins here:
http://docs.cksource.com/CKEditor_3.x/Tutorials

They will give you an understanding of the structure and required elements. I learned this by going through the tutorials while working with a copy of an existing plugin, it took some time, but most of what you need to is there.

The tutorials contain information about creating dialog windows and the parameters used, they will help you understand what's happening in the plugins/mediaelement/dialogs/mediaelement.js file.

You can modify the dialog file to contain the fields used by the MediaElement implementation. I suggest that you compare the embed code for flash with that used for the Media Element to see what parts correspond to each other and the modify the dialog file accordingly.