Home >> Archive >> 2012 >> Setup Drupal 7 WYSIWYG (experimental)
Tuesday 18 December 2012
Tags: 
Drupal 7
Guide
Experimental

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

updated: March-19-2013

I got a reply on drupal.org:
It cost me 2 months, dddave is totally right about this tutorial. Oeff...

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
 

 

Preparation

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

 

Configuration

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 3.6.3.7474")
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".
 
 

Weblinks

http://webwash.net/tutorials/customize-media-module-image-display-drupal-7

Article Archive

Try another theme