CKEditor Media Embed wrapper for Drupal 7

Submitted by christophe on Thu, 29/06/2017 - 08:47
Embed icon


Looks like most of my Drupal 7 clients are sharing the enthusiasm for CKEditor Media Embed and didn't want to wait for a Drupal 8 upgrade of their site, so here is a wrapper module for that.

There are probably way better implementations, like the one that was done for Drupal 8, but I wanted to have something quickly ready with close to zero maintenance. Also, it had to rely on the Wysiwyg module and not the CKEditor standalone module.

The module implements two hooks, the first one for defining the plugin reference, the other to provide a default embed provider.

/**
 * Implements hook_wysiwyg_plugin().
 */
function ckeditor_media_embed_wysiwyg_plugin($editor, $version) {
  $plugins = array();
  switch ($editor) {
    case 'ckeditor':
      if ($version > 4) {
        $plugins['embed'] = array(
          'path' => libraries_get_path('ckeditor') . '/plugins/embed',
          'filename' => 'plugin.js',
          'load' => TRUE,
          'buttons' => array(
            'Embed' => t('Embed'),
          ),
          'internal' => FALSE,
        );
      }
      break;
  }
  return $plugins;
}

/**
 * Implements hook_wysiwyg_editor_settings_alter().
 */
function ckeditor_media_embed_wysiwyg_editor_settings_alter(&$settings, $context) {
  if ($context['profile']->editor == 'ckeditor') {
    $settings['embed_provider'] = '//ckeditor.iframe.ly/api/oembed?url={url}&callback={callback}';
  }
}

One thing that I've learned about this: it is quite easy to make a case mistake in the array index for 'buttons' (noticed the 'Embed' key instead of the tempting 'embed'?).
As a result, if you have lowercase key here, the option is configurable in the Wysiwyg profile but the button does not show up in the editor toolbar, which is misleading. If you need to fix this, you must save your Wysiwyg profile again.

Installation

Uncompress the 4.7.0 release of CKEditor in sites/all/libraries/ckeditor, so the ckeditor.js file lives in sites/all/libraries/ckeditor/ckeditor.js.

Uncompress the following plugins in the sites/all/libraries/ckeditor/plugins directory.

Enable the CKEditor Media Embed module.

Check the 'Embed' option in the Full HTML wysiwyg profile (admin/config/content/wysiwyg/profile/full_html/edit).

Resources

 

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.