How do I set up a Wysiwyg editor for Drupal 7?

Articles

One of the commonest needs for a Drupal site is to be able to use a WYSIWYG (What You See Is What You Get) / Rich Text editor. But although this is a frequent requirement, if you are not experienced in working with Drupal it’s unlikely you’ll be able to set one up without some help.

The first thing to be aware of is that there is no WYSIWYG editor built-in to Drupal itself. Drupal is a community project and there’s no consensus about which editor is the best, so it’s up to whoever is building a site to select the editor they prefer. Once you have selected an editor, it’s not always easy to get it working the way you want. The task of allowing users to add images to their text, for example is frequently more painful than it needs to be.

So here’s my way of solving this problem for Drupal 7, in 6 (relatively) easy steps.

wysiwyg

1. Install the Wysiwyg module

The Wysiwyg contributed module doesn’t by itself provide you with a WYSIWYG editor. Rather, it is a common framework for integrating WYSIWYG editors with Drupal. Several editors are already integrated, and all you have to do is download the code for one and install it, and you are ready to start configuring it for your needs.

To install the Wysiwyg module, proceed in the usual way: download its code and unzip it, then place it in the sites/all/modules folder for your site. Navigate to the Administer -> Modules page and enable Wysiwyg. Navigate to Administer -> Configuration -> Content authoring -> Wysiwyg to start the next step.

2. Install TinyMCE

On the Wysiwyg configuration page you’ll see a list of possible editors to choose. My recommended choice is the popular editor, TinyMCE, which I pick for its reliability, flexibility and range of features. There’s a link on the Wysiwyg configuration page which you can click on to go to download TinyMCE. Get the code, unzip it and place it in the sites/all/libraries folder of your site.

Now if you refresh the Wysiwyg configuration page you’ll see some new options relating to setting up the text formats of your site with an editor. We’ll return to those shortly.

3. Install the media module

Assuming you want users to be able to add images directly to their content, the Media module is currently my preferred way to do it. For most cases you’ll want to grant the View Media permission to all users who should be able to upload images.

4. Configure your text formats

On a standard install of Drupal there are three preset text formats: Filtered HTMLFull HTML and Plain Text. It’s important to understand how these are meant to be used, so I’ll briefly explain them.

  • The Plain Text format is the simplest. It’s intended, as the name suggests, for users to input plain text. Depending on how it is configured, it may turn that input into very controlled HTML. Generally, line feeds will be turned into <br> and <p>tags. URLs may be turned into links. The Plain Text filter is commonly used for comments or other content entered by unprivileged users.  You won’t want to turn on WYSIWYG editing for Plain Text.
  • The Full HTML format is at the other extreme. It’s intended for users who can enter practically any HTML (apart from Javascript which would be a security loophole and so is always disallowed). You’ll normally allow only administrators and other privileged, highly trusted users to use the Full HTML filter. You will probably want to turn on WYSIWYG editing for Full HTML.
  • In between these two is the Filtered HTML format. This has some restrictions on the HTML that can be entered. It’s intended for general users who have some degree of privilege on the site. You will probably want to turn on WYSIWYG editing for Filtered HTML, but because not all HTML is allowed this case is the one that requires the most care, for reasons we’ll return to shortly when we look at .

The names of these formats can be changed as you see fit and you can create as many additional ones as you need. Be sure to go to Administer -> Configuration -> Content authoring -> Text formats and ensure that the right user roles are assigned to the right formats.

I recommend you set up your Plain Text format with only the following options checked:

 

The Full HTML format requires just these options:

 

The Filtered HTML format can be set up with these options:
 

 
 
 
In each case, ensure that these options appear in the order shown. There’s a facility to re-order them at the bottom of the format configuration form. For the Limit allowed HTML tags option, you can also specify which tags you will let your users enter. For most purposes, the following will be satisfactory:
<a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <br> <p>

There is no img tag in the list because the Media module uses its own special code to define images. This ensures that all images in your content have to have been uploaded to the site and this means that hot-linking is disallowed (some reasons why hot-linking is a bad idea) and you can control how images are displayed in terms of size.

5. Configure your Wysiwyg Profiles

On the Wysiwig Profiles page you’ll see there is an entry for each of your text formats. Select TinyMCE for the Full HTML and Filtered HTML formats and press Save.

Now you can assign the buttons that users will see when they use TinyMCE. Remember that you should only add buttons that generate code that will not be filtered out by the text format. In other words, you can add pretty much any buttons you like for the Full HTML format, but for the Filtered HTML format only a few will be relevant.

For the list of tags I provided above, you only need the buttons labelled Bold, Italic, Bullet list, Numbered List, Undo, Redo, Link, Blockquote, Citation, Source Code and Media Browser.

Remember: do NOT enable the default image button, use the Media Browser one instead that appears at the end of the list.

6. Review and test

With so many settings required it’s easy to forget something or get it slightly wrong so be prepared to spend some time trying out your Wysiwyg set-up. Make sure you test it at every different user level and pay particular attention to what anonymous users can do (they probably shouldn’t be able to do anything very much!).

In the next article I look in more detail at image styling and how you can configure the Media module for different image styles.

Figure W have been building Drupal sites since 2006. Call 077833 86951 or use our contact form to discuss your Drupal development requirements.

2 Responses to “How do I set up a Wysiwyg editor for Drupal 7?”

Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>