About

The CKEditor Media Embed module adds support for CKEditor plugins Media Embed, Semantic Media Embed, and Auto Embed to Drupal core's CKEditor.

Uses

Embed media resoruces
During content creation the author may add embed resources (videos, images, tweets, etc.) hosted by other services (called the "content providers") in content via CKEditor. By default the plugin uses the Iframely proxy service which supports over 1715 content providers such as Youtube, Vimeo, Twitter, Insagram, Imgur, GitHub, and Google Maps.

Provider

Only a single provider may be configured at a time, however, it is recommended to use a proxy service like Iframely or Noembed so that many different media providers can be supported. You may also use a specific media provider so the embeds are limited to the embed types it supports.

Provider URL
The service provider is configured on the CKEditor Media Embed plugin settings page.
The service provider is configured using a single url as the provider with a {url} and {callback} token.
Service provider URL examples
Iframely - //ckeditor.iframe.ly/api/oembed?url={url}&callback={callback}&api_key=MYAPITOKEN
Noembed - //noembed.com/embed?url={url}&callback={callback}
embed.ly - //api.embed.ly/1/oembed?url={url}&callback={callback}&key=MYAPITOKEN
Many others

Two different approaches

Two buttons as supplied with the module. The "Media Embed" button and the "Semantic Media Embed" this related to the two different approaches used by the CKEditor plugins.

Media Embed
Inserts the retrieved HTML from provider directly into the field and it is the HTML that is saved to the database.
Semantic Media Embed
Inserts the <oembed> tag into the field and is saved to the database instead of the embed HTML. We use a filter to transform the <oembed> tag to the media embed html on render.

In order to use the Semantic Embed the "Convert Oembed tags to media embeds" filter must be enabled on the text format that uses it.

Autoembed

Depending on which option is selected "Media Embed" or "Semantic Media Embed" when a media URL is inserted in to the field it will automatically be replaced with the corrected media embed automatically.

Installation

Install the module per normal then follow the instructions for installing the CKEditor plugins below.

Install CKEditor plugins

Easiest

  1. Install Drupal Console >= 1.0.0-rc20.
  2. Run drupal ckeditor_media_embed:install.

Harder (Not recommended)

  1. Download the Full “dev” package for CKEditor.
  2. Unzip the package and place its contents into DRUPAL_ROOT/libraries/ckeditor.
  3. Clear the cache

Hardest

  1. Download the following plugins:
  1. Unzip and place the contents for each plugin in the the following directory:
  • DRUPAL_ROOT/libraries/ckeditor/plugins/PLUGIN_NAME
  1. Clear the cache

Configuration

  • Go to the 'Text formats and editors' configuration page: `/admin/config/content/formats`, and for each text format/editor combo where you want to embed URLs, do the following:
    • Drag and drop the 'Media Embed' or the 'Semantic Media Embed' button into the Active toolbar.
    • If the text format uses the 'Limit allowed HTML tags and correct faulty HTML' filter, use the 'Semantic Media Embed' and read the instructions for the 'Semantic Media Embed' below.

Semantic Media Embed

If you are using the 'Semantic Media Embed' button be sure to do the following:

Additional plugins

This module also includes all additional non-core depdencies for the Media Embed CKEditor plugin.

Media Embed vs Semantic Media Embed

Similar modules

Supporting organizations: 

Project Information

Downloads