WYSIWYG

In Drupal, WYSIWYG refers to the visual editor on formatted text fields, CKEditor 5 in core, which writes the HTML for you as you format.

Learn DrupalDrupal glossary
Edited by Founder and CEO, DXPR Last updated

WYSIWYG stands for What You See Is What You Get. A WYSIWYG editor adds a toolbar to a text field so editors can make text bold, add headings or insert links with buttons instead of typing HTML. Drupal 11 core ships one, CKEditor 5, and you attach it to a text format.

How WYSIWYG editing works in Drupal 11

Two core modules cooperate. Text Editor (editor) is a framework that associates editors and toolbars with text formats. CKEditor 5 (ckeditor5) is the editor itself; its help says it needs JavaScript in the browser. Because the editor is tied to the format, changing the format under a field changes the editor too.

You configure the toolbar on the Text formats and editors page. Pick CKEditor 5 in the Text editor list, then drag buttons into the Active toolbar. Separators and rows help to group them. If the format uses the Limit allowed HTML tags and correct faulty HTML filter, its tag list follows the enabled plugins and toolbar items automatically.

The editor produces HTML, and the filters of the format still process the saved text when it is displayed. If a Source button is in the toolbar, editors can switch to the raw HTML.

Example

In the Standard profile, Basic HTML and Full HTML use CKEditor 5; Restricted HTML has no editor. The Basic HTML toolbar holds bold, italic, link, bulleted and numbered lists, block quote, image, heading, code and source editing. To add a horizontal rule, open Configure for Basic HTML, drag the horizontal line button into the Active toolbar and save. The Drupal User Guide walks through the same steps.

Common mistakes

  • Expecting an editor on every field. Only text formats with an editor show one, and only fields that use text formats can offer it.
  • Pasting tags in the Source view that no button covers. The CKEditor 5 help says tags that no plugin enables are stripped when you switch back to the visual view.
  • Switching to Full HTML to get one missing button. The Drupal docs say Full HTML does not restrict tags and should be kept for trusted administrators. Add the button to the format instead.

For marketing and content teams

The toolbar is the part of Drupal you will use most. The CKEditor 5 help says its buttons create semantically correct HTML, so use the heading button for headings instead of bold text. If you need a button you do not see, ask your developer to add it to your format.

With DXPR

A WYSIWYG editor works on the text in one field. The DXPR Builder page describes editing the live page instead: editors click the words they want to change and arrange ready-to-use elements with drag and drop.

Sources

Questions about WYSIWYG

CKEditor 5, which is a core module. The Text Editor module is the framework around it, and it lets a contributed module supply a different editor. Each editor is attached to a text format, so you choose it per format.

The editor configuration belongs to the text format, not to the field. When you switch the format under a field, the editor and its toolbar switch with it. A format with no editor, such as Restricted HTML in the Standard profile, shows no editor.

Not on its own. The editor writes HTML in the browser; the filters of the text format process the stored text when it is displayed. The Filter help says untrusted users should only get formats limited to plain text or a safe set of tags.

Related terms

All Drupal terms from A to Z