What wysiwyg editor do you want?

The first two steps are, as usual, the requirements and the module selection. Let's assume we have a site with two groups of users:

• Trusted editors. They have accounts on the site, write articles regularly, but are not very familiar with HTML. The articles mainly consist of text, links, tables and sometimes images. Long articles are prepared in MS Word and copied into the website. Short articles are directly edited on the site. SEO is important, so the use of header-tags should be enforced.
• Anonymous visitors. They don't have an account on the site, They comment on articles and on each other's comments. They only add text, images are not allowed.

Pick a module

In Drupal 7 the Wysiwyg module is the de-facto standard for adding a wysiwyg editor. It supports various wysiwyg editor libraries, such as TinyMCE and CKEditor. The alternative is the CKEditor module, a module specialized to support the CKEditor. I always use the Wysiwyg module. You can find a full list of wysiwyg modules at the end of this article.

For adding a wysiwyg editor to the site you need to use an integration module (e.g. Wysiwyg, CKEditor) plus the actual editor library. These editors are separate projects and can be downloaded elsewhere from the web. Integration modules contain documentation of the location where to download the editor(s).

Set up Text formats

The Wysiwyg module uses Text formats to apply an editor. Therefore, you need to set up a text format for the wysiwyg editor of your choice. If you plan to use multiple editors, create one text format for each editor.

Visit: Configuration > Content authoring > Text formats

Drupal has by default three text formats, Filtered HTML, Full HTML and Plain text. In this use case the users of the wysiwyg editor are trusted users, so there is no need to filter the HTML they enter with their text. You can modify the Full HTML text format for use with the wysiwyg editor. The Filtered HTML text format will not be used and can be disabled.

Modify the Full HTML text format configuration with the following:

• Name: Wysiwyg
• Role: Editor and Administrator
• Enabled filters: Correct faulty and chopped off HTML.
• Disable the other filters as they may cause undesired effects.

You can leave the Plain text format as it is for use by anonymous visitors. When experimenting with the filters (which I encourage), be carefull with the Filter processing order. Processing filters in the wrong sequence may break things or result in unsafe input. The image below shows the default filter processing order.

And now the Wysiwyg module

Download, install and enable the Wysiwyg module as usual.

Visit: Configuration > Content authoring > Wysiwyg profiles

When no editor libraries are installed yet, the installation instructions will appear. Follow the instruction of the editor of your choice. In this article the TinyMCE editor will be used. But do look at the other editors and try them out before making a choice.

Refresh the configuration page after you have downloaded, extracted and placed the library in the file system of your site. Select the TinyMCE editor for the Wysiwyg text format.

For a minimum configuration of the TinyMCE profile, edit the profile and select, for example, Bold and Italic under 'Buttons and plugins'. Save the configuration. Now create some content, for example a Basic page, which uses a text field with text formats.

You now have a basic wysiwyg editor in your Drupal website.

Read more on advanced wysiwyg configuration in a future article.

About security

Note that in this example we have used a minimum security policy for those using the wysiwyg editor. All HTML, scripts, embeds, etc. are allowed! Never use this configuration for anonymous or non-trusted users. If you have different user groups with different security levels, create a text format per group/role and configure the wysiwyg editor for each text format. The text format permissions determine which roles can use the wysiwyg editor.

List of Drupal wysiwyg modules

Wysiwyg module
Popular, supports various editor libraries.

CKEditor - WYSIWYG HTML editor
Popular, for CKEditor only.

BUEditor module
Used on drupal.org, requires html knowledge.

Aloha module
Under development.