Setting up WYSIWYG and CKEditor to include Media Browser / Embed Media button

Click here for a more up-to-date media recipe that works with media 7.x-2.x and 7.x-4.x

These instructions assume that Media has already been installed.

Install and enable the WYSIWYG module

For Media 7.x-2.x, also enable the Media WYSIWYG module that comes packaged with Media.

Clear cache and follow instructions found at /admin/config/content/wysiwyg:

These instructions point you to the main CK Editor download page, but as of 4/12/2013, you need to download CKEditor 3.6, not their latest, 4.0.

• The download link for the CKEditor 3.6 library is http://download.cksource.com/CKEditor/CKEditor/CKEditor%203.6.6/ckeditor...
• There is a bug in Drupal when using the latest version (4.0) - details found here http://drupal.org/node/1853550

Create sites/all/libraries folder in your Drupal site if it doesn’t exist already and extract CKEditor folder there.

Refresh /admin/config/content/wysiwyg, you are now presented with a list of available Text Formats in the site. We’ll want the “Full HTML” filter to use the WYSIWYG toolbar, but first we must configure that Full HTML filter properly on a different page.

Go to /admin/config/content/formats, and drag the “Full HTML” row to be the first row, above Filtered HTML. Click save.

• Setting “Full HTML” first sets it to the default text format for nodes to use in the node edit form.

Next, the Full HTML filter must be configured to propelry use the Media WYSWIYG functionality.

At /admin/config/content/formats, click the “configure” link in the Full HTML row.

• Check “Convert Media tags” under Enabled filters.
• If other roles besides the system administrator need the ability to embed Media into node content, those roles should be checked in the “Roles” checklist.
• Click “Save configuration”.

We’re ready to configure the CKEditor profile for Full HTML now. Go back ot /admin/config/content/wysiwyg, select CKEditor from the Dropdown for “Full HTML” and then click save.

Click the “Edit” link that now appears in the row for “Full HTML.”

• This screen configures the buttons that appear in the WYSWIYG toolbar. Expand the “Buttons and Plugins” section and select “Media Browser**”- as this is the button that allows us to embed Drupal Media from the Drupal Media Library.
• Add any other buttons to include in the WYSWYIG toolbar, such as Bold, Italic, bullets, etc.
• Click Save.

**In Media 7.x-2.x, the button is called “Embed Media”

You should now be able to embed Media from the Drupal Media Library into node content. Go to create a new node. As an example, create a new article by going to /node/add/article. You should see a button above the body text that opens up the Media Browser in a modal window.