Media Element Integration into Ckeditor

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 (, which has been suggested as a good alternative for playing audio and video ( ).

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..?

  • Audio play wrong file
  • High Quality Audio Recording in Web Browser
  • Problem using html5/js Audio with Safari (Windows)
  • HTML5 / JS Audio: Real-time audio mixing possible?
  • HTML5 Audio object doesn't play in Safari
  • How to play mp3 playlists with SoundManager using the controls
  • Thoughts?

  • Is there a way to trap the completion of a sound file load event?
  • Playing Audio In Browser
  • Minimalistic play() and pause() audio solution
  • Playing a simple sound with web audio api
  • What file formats are supported for the Web Audio API convolution functions?
  • HTTP “Content-Type” of “audio/mpeg” is not supported Issue On Firefox
  • One Solution collect form web for “Media Element Integration into Ckeditor”

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

    Capitalization matters, here’s the style guide: Coding Style Guidelines

    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.

    Load the new plugin in your config:

    config.extraPlugins = 'mediaelement';

    Add the button to your toolbar config setting 'MediaElement'


    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:

    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.