Connecting text editors to text formats

Add to Standard shortcuts

Goal

Configure a text format so that when a user is editing text and selects this text format, a text editor installed on your site is shown. Configure the text editor, such as choosing which buttons and functions are available. See Managing text filters and text formats for more about text formats.

What is a text editor?

A text editor is software (typically, a JavaScript library) that provides buttons and other command mechanisms to make editing HTML text easier. Some editors are called visual or WYSIWYG (What You See Is What You Get) editors; these editors hide the details of HTML from the user, and instead show formatted output on the screen. The core Text Editor module provides a framework for deploying text editors on your site. The core CKEditor 5 module provides CKEditor 5, which is a widely-used JavaScript text editor that creates clean and valid HTML; the module also enforces the HTML tag restrictions in the associated text format. Various contributed modules provide other editors; to install a new editor, besides installing the module, you may need to download the editor library from a third-party site.

Steps

  1. In the Manage administrative menu, navigate to Configuration > Content Authoring > Text formats and editors. The Text editor column in the table shows the text editor that is currently connected to each text format, if any.
  2. Follow the steps on Managing text filters and text formats to add a new text format or configure an existing text format; when you reach the step about text editors, return to this topic.
  3. Select CKEditor 5 as the Text editor, or another text editor that you have installed. The rest of these steps assume you selected CKEditor 5.
  4. Under Toolbar configuration, drag buttons between Available buttons and Active toolbar; only buttons in Active toolbar will be shown to the user. Focusing or hovering over a button will display a tooltip explaining what the button does.
  5. Drag buttons within Active toolbar to the desired order, and group buttons by dragging them between group identifiers; drag a new group identifier to the toolbar to add additional groups.
  6. If you add buttons that require configuration, the CKEditor 5 plugin settings section will be visible, and provide their respective configuration forms.
  7. Return to Managing text filters and text formats to complete the text format configuration, and be sure to save the text format.

Related topics