Last updated October 14, 2010. Created on June 18, 2010.
Edited by Melissamcewen, GoddamnNoise, marvil07. Log in to edit this page.

WYSIWYG is an acronym for What You See Is What You Get and describes a client-side content-editing system in which the final presentation of the output is displayed instead of raw source code. Drupal core does not contain a WYSIWYG editor, but many site builders chose to implement one because it allows users to manipulate a node's appearance without knowing any code.

There are several solutions for WYSIWYG on Drupal- one that provides an implementation of many popular WYSIWYG editors and several that work with specific WYSIWYG editors. A comparison of the editors themselves can be found here.


The WYSIWYG Module 2.x integrates several popular editors into Drupal. Upon enabling this module, it lists several different WYSIWYG editors and provides instructions on where to download and how to install them. Current options include openWYSIWYG, YUI Editor, jWYSIWYG, NiceEdit, markItUp, CKEditor, WYMeditor, Whizzywig, and FCKeditor.

Once installed, you can chose an editor for each input format, which allows for different types of editors for each format or the option to use none at all for some formats.

Once a profile is created for each input format, there are further options. It is possible to control whether it's default for users having access to that profile or whether users can chose default editor themselves. It is also possible to control whether or not the "enable/disable rich text" link is shown.

A list of buttons is also displayed and they can be enabled or disabled individually.

There are also options for the editor's appearance: the position of the toolbar, button alignment, and path location.

Options for controlling cleanup and output include verifying HTML to remove potentially malicious code, preformatting (if enabled, the editor will insert TAB characters on tab and preserve other whitespace characters just like a PRE element in HTML does), convert font tags to style, remove linebreaks, apply source formatting (if enabled, the editor will re-format the HTML source code. Disabling this option could avoid conflicts with other input filters), and force cleanup on paste (if enabled, the default paste function (CTRL-V or SHIFT-INS) behaves like the "paste from word" plugin function).

CSS options include controlling HTML block formats, which CSS files to use for the editor, and the ability to define font classes.

WYSIWYG has been integrated with the popular Features module so profiles can be exported and imported between sites.


Many WYSIWYG editors have built-in file managers used for uploading images and files. Enabling them requires editing both editor and module files. There are reasons not to use these file managers and to opt for Drupal modules like Insert or Imagebrower instead, because they have several potential security vulnerabilities.

WYSIWYG lacks many editor-specific advanced features, but in the future it may offer them.

CKEditor Module

The CKEditor Module provides integration specifically with the CKEditor WYSIWYG.

Once both the module and the CKEditor files are installed, there are several configuration options.

Profiles can be created for different user roles. There is an option to allow users to customize CKEditor.

There is the option to enable security filters, the HTML corrector and the HTML filter, per profile, as well as the ability to use CKEditor's security filters, though Drupal itself does most of the same things as those filters like protection from XSS attacks.

Exclusion or inclusion of the editor on pages is not controlled per input format, like WYSIWYG, but by advanced fields exclusion/inclusion. Inclusion/exclusion can be controlled by field types, names, and by path.

Editor appearance options allow for the control of default state (on or off), whether to show the disable/enable rich text editor toggle, whether to use the editor in a pop up window, which of CKEditor's skins to use, interface color, whether the toolbar is expanded or contracted by default, width in pixels or percent, and auto-detect language.

Toolbar sets must be defined by editing a module file "ckeditor.config.js."

Cleanup and output options include the tag CKEditor should use when [Enter] key is pressed, which tag CKEditor should use when [Shift] + [Enter] is pressed, font formats, and custom formatting options such as "indent the element contents."

CSS options include the ability to use a custom stylesheet for the editor. Predefined styles are controlled by editing a ckeditor.styles.js file.

A file browser can be chosen- either CKfinder or contributed modules like IMCE, Image Browser, or Web File Manager.

There are also some advanced options such as load method, load timeout, force pasting as plain text, and the ability to load ckeditor.config.js from theme path, which is probably the best-practices method for modifying that file.

Looking for support? Visit the forums, or join #drupal-support in IRC.


escoles’s picture

Re. CKEditor:

Exclusion or inclusion of the editor on pages is not controlled per input format, like WYSIWYG, but by advanced fields exclusion/inclusion.

This is not the case in the current stable release for D7. In that version, site builders are expected to implement field exceptions using input filters via core D7 functionality.

cddomaua’s picture

May be need update this article?
New version and new modules..