Media + CKEditor + Media CKEditor recipe for setup

Last updated on
7 August 2020

This is documentation for Drupal 7, which is no longer supported. Learn more and find resources for Drupal 7 sites

---
# This is a drush make file for a media_wysiwyg setup using the CKEditor
# module.
#
# NOTE: this recipe now specifies ckeditor v4.14.0 as the recommended library version (security release).
#
# Build a new d7 site using this recipe with this drush command:
# drush make /path/to/this/file /path/to/destination/folder
# HOWEVER, if you want to build it without core, you will have to run this command
# drush make /path/to/this/file --no-core /path/to/destination/folder
#
# After downloading and moving files into place, here are the manual steps
# needed to set everything up:
#
# 1. If Drupal is not already installed, install Drupal with the standard
#    profile: drush site-install
# 2. Enable these modules:
#    - media_ckeditor
#    - token
#    - media_oembed
# 3. At /admin/config/content/ckeditor/editg change the value for
#    "Path to the CKEditor plugins directory" to: %l/ckeditor/plugins
# 4. Go to a text format edit page (such as /admin/config/content/formats/my_format),
#    then make sure this checkbox is checked:
#    - "Convert Media tags to markup"
#    make sure that - "Convert URLs into links" is at the bottom, or else disabled.
#    If you do not have these ordered correct Drupal will render codes instead of images.
# 5. Go to the CKEditor profile edit page for the text format (such as
#    /admin/config/content/ckeditor/edit/MyFormat) and make sure these
#    checkboxes are checked under the "Editor Appearance" section:
#    - "Plugin for embedding files using Media CKEditor"
#    - "Plugin file: lineutils"
#   NEXT are the optional plugins (only enable widget , widgetselection if):
#   THE widget PLUGIN is known to interfere with the image plugin (but apparently widget is  required by the image2 plugin, if you want to use widget then follow instructions below enable these two plugins):
#    - "Plugin file: widget"
#    - "Plugin file: widgetselection"
#  Andrew@Germany with previous recipe had issues getting the widget plugin working: https://www.drupal.org/node/2813413#comment-12245775 with the image plugin (or image2 plugin) however I don't think this is a problem anymore now that I updated this recipe with the correct plugin versions.
#      I am leaving the note and link to Andrew@Germany for historical purposes.
# 6. Set your MyFormat as the default text format:
#     - go to /admin/config/content/formats drag your MyFormat to the top
#     - click save
# 7. Disable the ACF in the "Advanced Content Filter" section

api: 2
core: 7.x

# Necessary modules.
projects:
  drupal: 
    version: "7.72"
  media: "2.26"
  media_ckeditor: "2.14"
  media_oembed: "2.7"
  ctools: "1.15"
  file_entity: "2.30"
  token: "1.7"
  views: "3.24"
  ckeditor: "1.19"
# alternative to ckeditor and media_ckeditor is the latest wysiwyg module with the latest ckeditor library. Install the media_dev distribution to see how that is configured.

# Optional modules.

# The following allows for bulk uploads. After installing, enable media_bulk_upload.
  plupload: "1.7"
  multiform: "1.6"

# Necessary libraries.
libraries:
  ckeditor:
    download:
      type: "file"
      url: "https://download.cksource.com/CKEditor/CKEditor/CKEditor%204.14.0/ckeditor_4.14.0_full.zip"
  lineutils:
    download:
      type: "file"
      url: "https://download.ckeditor.com/lineutils/releases/lineutils_4.14.0.zip"
    destination: "libraries/ckeditor/plugins"

# The following is necessary if you are using bulk uploads.
  plupload:
    directory_name: plupload
    download: "https://github.com/moxiecode/plupload/archive/v1.5.8.zip"
    type: library
    patch:
      # For security, you need to remove the 'examples' directory. This patch automates that
      - "https://www.drupal.org/files/issues/plupload-1_5_8-rm_examples-1903850-29.patch"

# Optional libraries, version 4.14.0 seems to work well since media_ckeditor 2.10.
#consider widget as optional but recommended
  widget:
    download:
      type: "file"
      url: "https://download.ckeditor.com/widget/releases/widget_4.14.0.zip"
    destination: "libraries/ckeditor/plugins"
  widgetselection:
    download:
      type: "file"
      url: "https://download.ckeditor.com/widgetselection/releases/widgetselection_4.14.0.zip"
    destination: "libraries/ckeditor/plugins"
  image2:
    download:
      type: "file"
      url: "https://download.ckeditor.com/image2/releases/image2_4.14.0.zip"
    destination: "libraries/ckeditor/plugins"

# Troubleshooting: Following the steps above, you may also want to allow full html, not strip any html tags text formats admin/config/content/formats
#
# NEW TO TROUBLESHOOTING, a new submodule was added to the media/modules folder in the most recent release that provides a working default configuration, if you are having troubles getting this to work try enabling that module/feature and it will set the configuration to something that should work for you (test in a dev environment) and has a baseline ACF html tag filtering configuration that seems to work very well.
#
# Filter processing order
# 1. (Optional) Ensure that embedded Media tags are not contained in paragraphs
# 2. Convert Media tags to markup
# 3. (Optional) Correct faulty and chopped off HTML
# when troubleshooting, disable the other 'Filters'  
# admin/config/content/formats, making sure that the 'media' ones are enabled
#
# IMPORTANT NOTE: if you are to allow anonymous roles or untrusted roles access to insert media with ckeditor make sure to enable the ckeditor ACF , we have provided a baseline recommended ACF configuration below.
#

*ENABLE ACF IF ALLOWING UNTRUSTED ROLES ACCESS TO THE MEDIA_WYSIWYG , otherwise OPTIONAL*
If you do want to use / enable the ACF (advanced content filter) for ckeditor you will need to add rules to allow html attributes used by the media module. Here is a very good suggested configuration, it may need tweaking for your specific usecases.

I have tested this config below to work very well with the media embedding using the above recipe.

properties;
table[class](*);
tbody[class](*);
tr[class](*);
td[class,colspan](*);
img[title,alt,src,data-cke-saved-src](wysiwyg-break,drupal-content);
video[width,height,controls,src,controlslist,data-delta,data-fid,data-media-element](*);
source[src,type,data-cke-saved-src];
audio[controls,src](*);
img[*](media-element,file-default,media-wysiwyg-align-right,media-wysiwyg-align-left,media-wysiwyg-align-center);
p[class](*);
audio[controls,src](*);
b[class](*);
p[class](default,fanc*,text-align*,Indent*);
a[href,hreflang,data-entity-type,data-entity-uuid,title,target,class,tabindex](*);
h1[class](*);
h2[class](*);
h3[class](*);
h4[class](*);
h5[class](*);
h6[class](*);
hr[class](*);
div[class,aria-labelledby,data-parent,id](*);
button[class,aria-controls,aria-expanded,data-target,data-toggle,type,id](*);
sub[class](*);
sup[class](*);
strong[class](*);
em[class](*);
cite[class](*);
footer[class](default);
blockquote[class](*);
ul[class,type](*);
ol[class,start,type](*);
span[!class](*);
span[!lang](*);
li[class](*);

Conclusion: If you use these versions of plugins and ckeditor library, follow the above steps, you should be up and running nicely.  If you have issues or suggestions, open an issue in the media queue or media_ckeditor queue with the details and send me a contact message https://www.drupal.org/u/josepholstad

Help improve this page

Page status: No known problems

You can: