editor.overview.html.twig

---
label: 'Connecting text editors to text formats'
related:
  - core.content_structure
  - field_ui.manage_form
  - filter.overview
---
{% set filter_overview_topic = render_var(help_topic_link('filter.overview')) %}
{% set overview_link_text %}{% trans %}Text formats and editors{% endtrans %}{% endset %}
{% set overview_link = render_var(help_route_link(overview_link_text, 'filter.admin_overview')) %}
<h2>{% trans %}Goal{% endtrans %}</h2>
<p>{% 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 %}</p>
<h2>{% trans %}What is a text editor?{% endtrans %}</h2>
<p>{% 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 <em>visual</em> or <em>WYSIWYG (What You See Is What You Get)</em> 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 %}</p>
<h2>{% trans %}Steps{% endtrans %}</h2>
<ol>
  <li>{% trans %}In the <em>Manage</em> administrative menu, navigate to <em>Configuration</em> &gt; <em>Content Authoring</em> &gt; <em>{{ overview_link }}</em>. The <em>Text editor</em> column in the table shows the text editor that is currently connected to each text format, if any.{% endtrans %}</li>
  <li>{% 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 %}</li>
  <li>{% trans %}Select <em>CKEditor 5</em> as the <em>Text editor</em>, or another text editor that you have installed. The rest of these steps assume you selected <em>CKEditor 5</em>.{% endtrans %}</li>
  <li>{% trans %}Under <em>Toolbar configuration</em>, drag buttons between <em>Available buttons</em> and <em>Active toolbar</em>; only buttons in <em>Active toolbar</em> will be shown to the user. Focusing or hovering over a button will display a tooltip explaining what the button does.{% endtrans %}</li>
  <li>{% trans %}Drag buttons within <em>Active toolbar</em> to the desired order, and group buttons by dragging them between group identifiers; drag <em>a new group identifier</em> to the toolbar to add additional groups.{% endtrans %}</li>
  <li>{% trans %}If you add buttons that require configuration, the <em>CKEditor 5 plugin settings</em> section will be visible, and provide their respective configuration forms. {% endtrans %}</li>
  <li>{% trans %}Return to {{ filter_overview_topic }} to complete the text format configuration, and be sure to save the text format.{% endtrans %}</li>
</ol>

File

core/modules/editor/help_topics/editor.overview.html.twig

---
label: 'Connecting text editors to text formats'
related:
  - core.content_structure
  - field_ui.manage_form
  - filter.overview
---
{% set filter_overview_topic = render_var(help_topic_link('filter.overview')) %}
{% set overview_link_text %}{% trans %}Text formats and editors{% endtrans %}{% endset %}
{% set overview_link = render_var(help_route_link(overview_link_text, 'filter.admin_overview')) %}
<h2>{% trans %}Goal{% endtrans %}</h2>
<p>{% 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 %}</p>
<h2>{% trans %}What is a text editor?{% endtrans %}</h2>
<p>{% 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 <em>visual</em> or <em>WYSIWYG (What You See Is What You Get)</em> 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 %}</p>
<h2>{% trans %}Steps{% endtrans %}</h2>
<ol>
  <li>{% trans %}In the <em>Manage</em> administrative menu, navigate to <em>Configuration</em> &gt; <em>Content Authoring</em> &gt; <em>{{ overview_link }}</em>. The <em>Text editor</em> column in the table shows the text editor that is currently connected to each text format, if any.{% endtrans %}</li>
  <li>{% 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 %}</li>
  <li>{% trans %}Select <em>CKEditor 5</em> as the <em>Text editor</em>, or another text editor that you have installed. The rest of these steps assume you selected <em>CKEditor 5</em>.{% endtrans %}</li>
  <li>{% trans %}Under <em>Toolbar configuration</em>, drag buttons between <em>Available buttons</em> and <em>Active toolbar</em>; only buttons in <em>Active toolbar</em> will be shown to the user. Focusing or hovering over a button will display a tooltip explaining what the button does.{% endtrans %}</li>
  <li>{% trans %}Drag buttons within <em>Active toolbar</em> to the desired order, and group buttons by dragging them between group identifiers; drag <em>a new group identifier</em> to the toolbar to add additional groups.{% endtrans %}</li>
  <li>{% trans %}If you add buttons that require configuration, the <em>CKEditor 5 plugin settings</em> section will be visible, and provide their respective configuration forms. {% endtrans %}</li>
  <li>{% trans %}Return to {{ filter_overview_topic }} to complete the text format configuration, and be sure to save the text format.{% endtrans %}</li>
</ol>