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.
Prepare Requirements
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:
{% highlight bash %} | 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 | {% endhighlight %}
Download Modules and Plugins
{% highlight bash %}
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.zip {% endhighlight %}
oEmbed's latest version (1.17) currently only works with CKeditor 4.4. That is why we downloaded CKEditor library 4.4.
{% highlight bash %}
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.zip {% endhighlight %}
The 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:
{% highlight bash %} Uncaught [CKEDITOR.resourceManager.load] Resource name "widget" was not found at "sites/all/libraries/ckeditor/plugins/widget/plugin.js?" {% endhighlight %}
{% highlight bash %}
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/ {% endhighlight %}
Enable Modules
{% highlight bash %}
Download and enable the libraries module so our custom module can use it.
drush en -y libraries
Enable CKeditor module:
drush en -y ckeditor {% endhighlight %}
Declare Plugin
Now we need to tell CKEditor about the oEmbed plugin so that is available for us configure for our text format.
- Create a custom module and add the following in the .module
{% highlight bash %} /**
- Implements hook_ckeditor_plugin(). */ function drustrap_ckeditor_ckeditor_plugin() { $plugins = array();
$plugins['oembed'] = array( 'name' => 'oembed', 'desc' => t('Embed external media via the oEmbed plugin.'), 'path' => '/' . libraries_get_path('ckeditor') . '/plugins/oembed/', 'buttons' => array( 'oembed' => array('label' => 'oembed', 'icon' => 'icons/oembed.webp'), ), );
return $plugins; } {% endhighlight %}
Enable this custom module and continue.
Configure text format
- Edit "Full HTML" profile at /admin/config/content/ckeditor/edit/Full
- Enable "Embed external media via the oEmbed plugin"
- Move "oembed" button from "Available buttons" to "Current toolbar"
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.
Make File
If you want to do this quickly, put the following in a .make file and run drush make:
{% highlight bash %} ; 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 {% endhighlight %}