Add text format

Machine name: ckeditor5
Roles
Toolbar configuration
Move a button into the Active toolbar to enable it, or into the list of Available buttons to disable it. Buttons may be moved with the mouse or keyboard arrow keys.

The toolbar buttons that don't fit the user's browser window width will be grouped in a dropdown. If multiple toolbar rows are preferred, those can be configured by adding an explicit wrapping breakpoint wherever you want to start a new row.

  • available button Undo. Press the down arrow key to activate
  • available button Redo. Press the down arrow key to activate
  • available button Style. Press the down arrow key to activate
  • available button Special characters. Press the down arrow key to activate
  • available button Source. Press the down arrow key to activate
  • available button Underline. Press the down arrow key to activate
  • available button Code. Press the down arrow key to activate
  • available button Code Block. Press the down arrow key to activate
  • available button Strikethrough. Press the down arrow key to activate
  • available button Subscript. Press the down arrow key to activate
  • available button Superscript. Press the down arrow key to activate
  • available button Block quote. Press the down arrow key to activate
  • available button Bulleted list. Press the down arrow key to activate
  • available button Numbered list. Press the down arrow key to activate
  • available button Horizontal line. Press the down arrow key to activate
  • available button Text alignment. Press the down arrow key to activate
  • available button Remove Format. Press the down arrow key to activate
  • available button table. Press the down arrow key to activate
  • available button Image. Press the down arrow key to activate
  • available button Indent. Press the down arrow key to activate
  • available button Outdent. Press the down arrow key to activate
  • available button Language. Press the down arrow key to activate
  • available button Drupal media. Press the down arrow key to activate
  • available button Divider. Press the down arrow key to use this divider in the active button list
  • available button Wrapping. Press the down arrow key to use this divider in the active button list
  • active button Heading. Press the up arrow key to deactivate. Use the right and left arrow keys to move position
  • active button Bold. Press the up arrow key to deactivate. Use the right and left arrow keys to move position
  • active button Italic. Press the up arrow key to deactivate. Use the right and left arrow keys to move position
{"undo":{"label":"Undo"},"redo":{"label":"Redo"},"heading":{"label":"Heading"},"style":{"label":"Style"},"specialCharacters":{"label":"Special characters"},"sourceEditing":{"label":"Source"},"bold":{"label":"Bold"},"italic":{"label":"Italic"},"underline":{"label":"Underline"},"code":{"label":"Code"},"codeBlock":{"label":"Code Block"},"strikethrough":{"label":"Strikethrough"},"subscript":{"label":"Subscript"},"superscript":{"label":"Superscript"},"blockQuote":{"label":"Block quote"},"link":{"label":"Link"},"bulletedList":{"label":"Bulleted list"},"numberedList":{"label":"Numbered list"},"horizontalLine":{"label":"Horizontal line"},"alignment":{"label":"Text alignment"},"removeFormat":{"label":"Remove Format"},"insertTable":{"label":"table"},"drupalInsertImage":{"label":"Image"},"indent":{"label":"Indent"},"outdent":{"label":"Outdent"},"textPartLanguage":{"label":"Language"},"drupalMedia":{"label":"Drupal media"}}
Press the down arrow key to add to the toolbar.
Move this button in the toolbar by pressing the left or right arrow keys. Press the up arrow key to remove from the toolbar.
Headings
Enabled Headings
These are the headings that will appear in the headings dropdown. If a heading is not chosen here, it does not necessarily mean the corresponding tag is disallowed in the text format.
Media
Ensures that the latest versions of images uploaded via a Text Editor are displayed, along with their dimensions.
Uses a data-align attribute on <img> tags to align images.
Uses a data-caption attribute on <img> tags to caption images.
Disallows usage of <img> tag sources that are not hosted on this site by replacing them with a placeholder image.
Instruct browsers to lazy load images if dimensions are specified. Use in conjunction with and place after the 'Track images uploaded via a Text Editor' filter that adds image dimensions required for lazy loading. Results can be overridden by <img loading="eager">.
Embeds media items using a custom tag, <drupal-media>. If used in conjunction with the 'Align/Caption' filters, make sure this filter is configured to run after them.
Limit allowed HTML tags and correct faulty HTML
Display any HTML as plain text
A TYPE_MARKUP_LANGUAGE filter incompatible with CKEditor 5
Track images uploaded via a Text Editor
Align images
Convert line breaks into HTML (i.e. <br> and <p>)
Caption images
Convert URLs into links
Restrict images to this site
Correct faulty and chopped off HTML
Lazy load images
Embed media
Limit allowed HTML tags and correct faulty HTML (Enabled)
With CKEditor 5 this is a read-only field. The allowed HTML tags and attributes are determined by the CKEditor 5 configuration. Manually removing tags would break enabled functionality, and any manually added tags would be removed by CKEditor 5 on render.
Convert URLs into links (Disabled)
characters
URLs longer than this number of characters will be truncated to prevent long strings that break formatting. The link itself will be retained; just the text portion of the link will be truncated.
Embed media (Enabled)
The view mode that an embedded media item should be displayed in by default. This can be overridden using the data-view-mode attribute.
Media types selectable in the Media Library
If none are selected, all will be allowed.
View modes selectable in the 'Edit media' dialog
If two or more view modes are selected, users will be able to update the view mode that an embedded media item should be displayed in after it has been embedded. If less than two view modes are selected, media will be embedded using the default view mode and no view mode options will appear after a media item has been embedded.