CKEditor Media Embed Plugin

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.

• {url} - Token will be replaced during the request with the correct requested url, e.g. https://twitter.com/ckeditor/status/401373919157821441.
• {callback} - Token will be replaced during the request with the correct globally available callback used for JSONP requests.

Service provider URL examples

Iframely - //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:

• Media Embed
• Media Semantic Embed
• Media Embed Base
• Auto Embed
• Auto Link
• Notification
• Notification Aggregator

2. Unzip and place the contents for each plugin in the the following directory:

• DRUPAL_ROOT/libraries/ckeditor/plugins/PLUGIN_NAME

3. 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:

• As per #2742571: 403 error - needed API key if you are using Iframe.ly you will need to get an API key or use a different service.
• Enable the 'Convert Oembed tags to media embeds' filter.
• If the text format uses the 'Limit allowed HTML tags and correct faulty HTML' filter, add <oembed> to the 'Allowed HTML tags' field. (This should happen automatically however, in some cases it does not. See #2689083: Unidirectional editor configuration -> filter settings syncing doesn't respect table child tags.)

Additional plugins

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

Media Embed vs Semantic Media Embed

• Media Embed
• Media Embed Sematic
• Media Embed Base
• Notification
• Notification Aggregator
• Auto Embed
• Auto Link

Similar modules

• URL Embed