CKEditor Media Embed Plugin

Drupal 11

The dev branch of 2.x (2.x-dev) is in development and currently supports Drupal 11. This will remain in dev until Drupal 11 is released but testing on both 10 and 11 are welcome. Support for 9 is being dropped.

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 resources

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, Instagram, Imgur, GitHub, and Google Maps.

Media resource field

Provides a link field formatter that will render the link using the configured oembed media provider

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 Drush
2. Enable CKEditor media embed module.
3. Run drush 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
4. Run drush config-set ckeditor_media_embed.settings plugins_version_installed [INSTALLED VERSION OF PLUGINS]

Hardest

1. Download the following plugins:

• Media Embed
• Media Semantic Embed
• Media Embed Base
• Auto Embed
• Auto Link
• Notification
• Notification Aggregator
• Text Match (As of CKEditor 4.11)
• Link
• Fake Objects

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
4. Run drush config-set ckeditor_media_embed.settings plugins_version_installed [INSTALLED VERSION OF PLUGINS]

Configuration

WYSIWYG

• 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.)

Field formatter

The field formatter allows link fields to be rendered via the configured oembed service provider.

• The field formatter allows link fields to be rendered via the configured oembed service provider.
• Select the "Oembed element using CKEditor Media Embed provider" format for the link field you wish.

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
• Text Match (As of CKEditor 4.11)
• Link
• Fake Objects

Similar modules

• URL Embed