Skip to main content

Setup Drupal 7 WYSIWYG (experimental)

Published on 2012-12-18

Warning: don't follow this guide on production websites!

updated: March-19-2013

I got a reply on
It cost me 2 months, dddave is totally right about this tutorialOeff...

As stated above I like this content in principle BUT I have one quibble with the wysiwyg tutorial as it currently seems a tad rushed. I heavily doubt that new users relying on that tutorial would have much fun with the media integration. Media is not yet in a state where a simple "enable and turn on" is sufficient. Instead Media/ Media_Youtube require additional set-ups (as you know yourself). So if you don't want go that deep at least provide some words of warning/caution and point users to additional resources.


Media 2.x is under heavy development

Media 2.x is more than promissing, but you cannot downgrade back easily. Don't install on production websites.
You can use it for handling images and documents. It includes a media browser and fieldable file types. If you only need images, Media 1.x is a good alternative.

About Media_youtube

Hard to configure and your clients also need buttons for Google Maps, Slideshare, ... etc.
As a fallback use the source code button. There you can copy-paste your Youtube embed code (or widgets from other sites). You must understand html offcourse.

Other modules in this guide

Still like them


Better guides will follow :)


Original post below


After this blogpost you can setup a decent WYSIWYG editor for your Drupal pages and articles.

I use this method on all my clients websites. BTW: you can see a little working implementation in the comment section below this page.


Easy file management


Insert images, documents and Youtube video's.

Good SEO

New link type: Internal Path




First download and enable these modules in your Drupal 7 website:



Setup HTML filters

Go to admin/config/content/formats and choose your format. For example "Filtered HTML".


Under "Enabled filters"

  • Convert Media tags to markup new
  • CKEditor Link Filter


Under "Limit allowed HTML tags" 

Add to "Allowed HTML Tags":

<a> <img> <embed>

Save configuration


Setup WYSIWYG Editor

Go to admin/config/content/wysiwyg and choose your format.


First download and install CKEditor

Follow "installation instructions" just below the "Save" button.


Choose editor

Text Format: "Filtered HTML"

Editor: choose CKEditor (Today I have "CKEditor")

Save Form


Under Operations click Edit for your WYSIWYG Profile


Edit your WYSIWYG Profile

In this example I am on admin/config/content/wysiwyg/profile/filtered_html/edit

Add the installed modules to our editor.


Under "Buttons and Plugins" activate:

  • Media browser
  • Link
  • CKEditor Link


Save Form


Try out!

goto node/add/page.

Check the button hightlighted in the images starting this blogpost.

You can embed Youtube video's under button "media", then "web".