This is a short guide on how to setup oEmbed plugin so authors can easily embed YouTube videos. Since there are several ways of setting up WYSIWYG on Drupal 7, it can easily get confusing. This is much eaiser in Drupal 8 since WYSIWYG is part of core. In this guide, we will be using CKEditor for Drupal 7.
We will install several modules and CKEditor plugins to get this working. Due to dependency issues, we will be using specific versions of each component.
Here is a table of requirements:
| Name | Type | Version | Reason |
| --------- | --------------- | --------- | ----------------------- |
| ckeditor | Drupal module | 7.x-1.17 | |
| libraries | Drupal module | latest | used to declare plugins |
| ckeditor | Drupal library | 4.4 | |
| oEmbed | CKEditor plugin | 1.17 | used to embed videos |
| widget | CKEditor plugin | 4.4.8 | dependency of oEmbed |
| lineutils | CKEditor plugin | 4.4.8 | dependency of oEmbed |# Download CKeditor module (current: 7.x-1.17):
drush dl ckeditor
# Download CKEditor library:
curl -LO http://download.cksource.com/CKEditor/CKEditor/CKEditor%204.4.8/ckeditor_4.4.8_full.zip
unzip ckeditor_4.4.8_full.zip -d sites/all/libraries/
rm ckeditor_4.4.8_full.zipoEmbed’s latest version (1.17) currently only works with CKeditor 4.4. That is why we downloaded CKEditor library 4.4.
# Download oEbmed widget.
curl -LO http://download.ckeditor.com/oembed/releases/oembed_1.17.zip
mkdir sites/all/libraries/ckeditor/plugins/oembed
unzip oembed_1.17.zip -d sites/all/libraries/ckeditor/plugins/oembed
rm oembed_1.17.zipThe current version of widget plugin (4.5.10) is not compatible with CKEditor 4.4, so we need to download widget version 4.4.8. If you don’t download the widget plugin, you will get an error like this:
Uncaught [CKEDITOR.resourceManager.load] Resource name "widget" was not found at "sites/all/libraries/ckeditor/plugins/widget/plugin.js?"# Download widget plugin.
curl -LO http://download.ckeditor.com/widget/releases/widget_4.4.8.zip
unzip widget_4.4.8.zip -d sites/all/libraries/ckeditor/plugins/
rm widget_4.4.8.zip
# Download Line Utilities plugin.
curl -L http://download.ckeditor.com/lineutils/releases/lineutils_4.4.8.zip -o /tmp/lineutils_4.4.8.zip
unzip /tmp/lineutils_4.4.8.zip -d sites/all/libraries/ckeditor/plugins/# Download and enable the libraries module so our custom module can use it.
drush en -y libraries
# Enable CKeditor module:
drush en -y ckeditorNow we need to tell CKEditor about the oEmbed plugin so that is available for us configure for our text format.
/**
* Implements hook_ckeditor_plugin().
*/
function drustrap_ckeditor_ckeditor_plugin() {
$plugins = array();
$plugins['oembed'] = array(
'name' => 'oembed',
'desc' => t('Embed external media via the <a href="http://ckeditor.com/addon/oembed">oEmbed plugin</a>.'),
'path' => '/' . libraries_get_path('ckeditor') . '/plugins/oembed/',
'buttons' => array(
'oembed' => array('label' => 'oembed', 'icon' => 'icons/oembed.png'),
),
);
return $plugins;
}Enable this custom module and continue.
You should now be able to embed a video:
Also, remember to download the full CKEditor package. Otherwise, you will run
into some issues. We had initially installed the “standard” version and had to
switch to the “full” version. After having done that, we got the error Cannot
read property 'ltr' of undefined in the console. We opened Chrome developer
tools and clicked on “Disable cache (while DevTools is open)” to resolve it.
If you want to do this quickly, put the following in a .make file and run drush make:
; Drush Make API version
api = 2
; Drupal core version
core = 7.x
; Ignore Drupal core.
options[no-core] = TRUE
;*************************;
; Dependencies
;*************************;
; CKEditor module
projects[ckeditor][subdir] = contrib
projects[ckeditor][version] = 1.17
; CKEditor library
libraries[ckeditor][download][type] = get
libraries[ckeditor][download][url] = http://download.cksource.com/CKEditor/CKEditor/CKEditor%204.4.8/ckeditor_4.4.8_full.zip
libraries[ckeditor][directory_name] = ckeditor
libraries[ckeditor][destination] = libraries
; oEmbed plugin
libraries[ckeditor_oembed][download][type] = file
libraries[ckeditor_oembed][download][url] = http://download.ckeditor.com/oembed/releases/oembed_1.17.zip
libraries[ckeditor_oembed][directory_name] = oembed
libraries[ckeditor_oembed][destination] = libraries/ckeditor/plugins
; Widget plugin
libraries[ckeditor_widget][download][type] = file
libraries[ckeditor_widget][download][url] = http://download.ckeditor.com/widget/releases/widget_4.4.8.zip
libraries[ckeditor_widget][directory_name] = widget
libraries[ckeditor_widget][destination] = libraries/ckeditor/plugins
; Line Utilities plugin
libraries[ckeditor_lineutils][download][type] = file
libraries[ckeditor_lineutils][download][url] = http://download.ckeditor.com/lineutils/releases/lineutils_4.4.8.zip
libraries[ckeditor_lineutils][directory_name] = lineutils
libraries[ckeditor_lineutils][destination] = libraries/ckeditor/plugins