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
- 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. - Install Drush
- Enable CKEditor media embed module.
- Run
drush ckeditor_media_embed:install
. - Download the Full “dev” package for CKEditor.
- Unzip the package and place its contents into
DRUPAL_ROOT/libraries/ckeditor
. - Clear the cache
- Run
drush config-set ckeditor_media_embed.settings plugins_version_installed [INSTALLED VERSION OF PLUGINS]
- 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
- Unzip and place the contents for each plugin in the the following directory:
DRUPAL_ROOT/libraries/ckeditor/plugins/PLUGIN_NAME
- Clear the cache
- Run
drush config-set ckeditor_media_embed.settings plugins_version_installed [INSTALLED VERSION OF PLUGINS]
-
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.
- 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.) - 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.
- 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
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.
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
Harder (Not recommended)
Hardest
Configuration
WYSIWYG
Semantic Media Embed
If you are using the 'Semantic Media Embed' button be sure to do the following:
Field formatter
The field formatter allows link fields to be rendered via the configured oembed service provider.
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
Project information
- Module categories: Content Editing Experience, Media
- 12,418 sites report using this module
- Created by grndlvl on , updated
- Stable releases for this project are covered by the security advisory policy.
Look for the shield icon below.
Releases
Development version: 2.x-dev updated 18 Apr 2024 at 00:40 UTC
3393693 - Drupal 12 issues
Development version: 8.x-1.x-dev updated 8 Apr 2024 at 23:11 UTC