diff --git a/core/modules/help_topics/help_topics/editor.overview.html.twig b/core/modules/help_topics/help_topics/editor.overview.html.twig index 4deb28d0297..245fc24f4c2 100644 --- a/core/modules/help_topics/help_topics/editor.overview.html.twig +++ b/core/modules/help_topics/help_topics/editor.overview.html.twig @@ -10,14 +10,14 @@ related:

{% trans %}Goal{% endtrans %}

{% trans %}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 {{ filter_overview_topic }} for more about text formats.{% endtrans %}

{% trans %}What is a text editor?{% endtrans %}

-

{% trans %}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 module provides CKEditor, which is a widely-used JavaScript WYSIWYG 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.{% endtrans %}

+

{% trans %}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.{% endtrans %}

{% trans %}Steps{% endtrans %}

  1. {% trans %}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.{% endtrans %}
  2. {% trans %}Follow the steps on {{ filter_overview_topic }} to add a new text format or configure an existing text format; when you reach the step about text editors, return to this topic.{% endtrans %}
    3. -
  3. {% trans %}Select CKEditor as the Text editor, or another text editor that you have installed. The rest of these steps assume you selected CKEditor.{% endtrans %}
    4. -
  4. {% trans %}Under Toolbar configuration, drag buttons between Available buttons and Active toolbar; only buttons in Active toolbar will be shown to the user. If you are using a mouse, you can hover over a button to see a tooltip explaining what the button does.{% endtrans %}
    5. -
  5. {% trans %}Drag buttons within Active toolbar to the desired order, and group buttons by dragging them into the grouping boxes; click Add group to add additional groups.{% endtrans %}
    6. -
  6. {% trans %}Under CKEditor plugin settings, configure the buttons that have configuration. This section will not be present if there are no active buttons with configuration.{% endtrans %}
    7. +
  7. {% trans %}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.{% endtrans %}
    8. +
  8. {% trans %}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.{% endtrans %}
    9. +
  9. {% trans %}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.{% endtrans %}
    10. +
  10. {% trans %}If you add buttons that require configuration, the CKEditor 5 plugin settings section will be visible, and provide their respective configuration forms. {% endtrans %}
  11. {% trans %}Return to {{ filter_overview_topic }} to complete the text format configuration, and be sure to save the text format.{% endtrans %}