Drupal: Installing CKEditor, WYSIWYG Module and Media Module
Published on Sunday, Mar 2, 2014
As you know WordPress has a nice Media Library which allows you to upload images, crop them and create thumbnails. But you can’t find this feature on Drupal. In this tutorial we will try to install WYSIWYG module and Media module to create a Media Library just like on WordPress. Here are the steps:
- Download Media Module from https://drupal.org/project/Media In this case we will download the version 7.x-1.4 for Drupal 7
- Download Wysiwyg https://drupal.org/project/wysiwyg In this case we will download the version 7.x-2.2
- Extract and upload Wysiwyg 7.x-2.2 and Media 7.x-1.4 module to site/all/modules
- Enable these modules from Modules page
- Wysiwyg 7.x-2.2 only supports CKEditor 3.x version so download this ckeditor from http://download.cksource.com/CKEditor/CKEditor/CKEditor%203.6.6.1/ckeditor_3.6.6.1.zip extract and upload it to sites/all/libraries/ folder so that the path of ckeditor.js is _sites/all/libraries/ckeditor/ckeditor.js _
- Ffrom top menu go to Administration > Configuration, on Configuration page, click Wysiwyg profiles on Content authoring section
- on Wysiwyg profiles page select CKEditor 3.x from editor dropdown for Full HTML TEXT FORMAT and click Save then click Edit from operation column. See the screenshot for details:
- on CKEditor profile for Full HTML page, on BUTTONS AND PLUGINS section: check all the checkboxes and click Save. See the screenshot for details:
- if you get this error message: “The Convert Media tags to markup filter must be enabled for the Full HTML format in order to use the Media browser WYSIWYG button“, then right click that Full HTML format link to open in a new tab and you’ll open : Administration » Configuration » Content authoring » Text formats » Full HTML page. On Enable filters section, check the Convert Media tags to markup checkbox and click Save Configuration and don’t forget to click Save on CKEditor profile for Full HTML page to make these buttons available.
- Now you should be able to use CKEditor in Full Html text format mode and insert an image to your content using Add Media button from CKEditor toolbar