Home
Empowerment through collective innovation

Installing a wysiwyg editor on Drupal 6

Submitted by albert on Wed, 10/08/2011 - 09:46

This tutorial is for Drupal 6. If you are working with Drupal 7 click here.

Duration: about an hour.
Skill level: intermediate.

Following is a step by step tutorial on installing a wysiwyg editor on Drupal 6. Some notes (1) none of this works with features for the moment, so if you are using a dev-stage-prod development workflow, you must follow the tutorial on your production site. (2) This tutorial does not cover how to enter images in text using wysiwyg. (3) This tutorial assumes that users who will have access to the wysiwyg editor are fully trusted.

Basic setup

Installing the wysiwyg editor.

  • admin/user/roles: add a role called "wysiwyg user". Users with this role are considered trusted, and will be presented with wysiwyg text areas and Full HTML input format by default. Note: it is preferable to create a role just for this purpose, and not to associate any permissions to it; and not to export this role via features (at least until this issue is resolved).
  • Download and install wysiwyg. This is the best module for the job because it links a wysiwyg editor to a specific input format.
  • admin/settings/wysiwyg/profile: if no editor is installed, choose one (I like FCKeditor), and install it into your sites/all/libraries, sites/www.koumbit.org/libraries, or sites/example.com/libraries folder, depending on your installation. If you're not sure where to put it, put it in sites/all/libraries.
  • admin/settings/wysiwyg/profile: refresh this page and associate Full HTML with your editor.
  • admin/settings/wysiwyg/profile: Under "operations", click "edit" next to the Full HTML editor. In the buttons and plugins section, activate some buttons you would like on your editor. I like to put bold, italic, bullet list, numbered list, HTML block format.

Setting the default input format

The default input format for all users is filtered HTML, the safest input format available. We need to make full HTML the default input format for trusted users, i.e. users with the "wysiwyg user" role.

  • Download and install better_formats. This module will allow you to associate different default input formats depending on a user's role. Anonymous users and other untrusted users will have access only to filtered HTML, whereas any user with the role "wysiwyg user" will have access to Full HTML.
  • admin/settings/filters/2: check "wysiwyg user", giving users with that role access to the full HTML input format
  • admin/settings/filters/defaults: in the "Node defaults" and "Block defaults" (and "Comment default" if you want) sections, (a) drag "wysiwyg user" to the top of the list; (b) next to wysiwyg user, choose "Full HTML" in the Default format column.

Make html comments hidden

This issue affects only Drupal 6. The underlying code of the entered text is in HTML format, which can contain comments. Generally comments appear in the code and not to the end user. Drupal 6, however, escapes the first "less than" symbol of HTML comments, so that <!-- This is a comment -->, for example, becomes &lt;!-- This is a comment --> in the underlying code entered by your users. This is confounding to many users because the comments don't appear in the wysiwyg editor, but do appear in the published page. Moreover, most users don't know what an HTML comment is, and are not aware they are inserting comments into their text. This is because a popular way of entering text is to first type it up in Microsoft Word, and then copy and paste it into the wysiwyg editor. Microsoft Word inserts dozens of lines of garbage in HTML comments, and this is what we want to prevent from appearing to the end user. For more info on the headaches caused by this problem see this Google search.

  • Download and install htmlcomment. This module will revert escaped (and visible) comments to their intended unescaped (and hidden) form
  • admin/settings/filters/2: configure your Full HTML input format to include the html comments filter. This prevents the escaped comment problem described above.

Testing

We now need to make sure that users with the "wysiwyg user" role can enter text using a wysiwyg editor.

  • user: click the edit tab and give yourself the "wysiwyg user" role.
  • node/add/page: voilà, you have a wysiwyg editor.

Comments? Leave them here.