CKEditor 5 plugin interfaces
The interfaces CKEditor 5 plugins open for their options, in seven editors: dropdowns of configured headings, styles and languages, the list properties panel, the table toolbars and property balloons, the image toolbar and its balloons, the plugins this site adds, the packages core ships and no plugin turns on -- font colors, highlight, find and replace, mentions, bookmarks, word count -- and three plugins written for this page, a balloon form, a widget with a contextual toolbar and a dropdown of grouped items with a switch. Nothing typed here is saved: the editors belong to no form, their text formats exist only on this page, and nothing in them uploads files or reads the content of the site.
Dropdowns of configured options
Core plugins whose toolbar items open a list, and where the list is what a text format configures: the headings it allows, the styles it defines, the alignments, the code block languages, the languages a part of the text can be marked in. Each is configured here the way a site would configure it, through the settings of the plugin.
- Heading offers only the three headings the format enables.
- Styles lists the styles the format defines, each previewed, and disables those that do not apply to the selection: put the cursor in the quotation and the quotation styles become available.
- Code block is a split button: the left half inserts the last language used, the arrow lists them all.
- Language lists the six official languages of the United Nations, the shortest list the plugin can be given.
- Special characters opens a grid with a category selector above it.
- Source replaces the editing area with a textarea of the HTML and disables every other button.
List properties
With list properties on, the list buttons become split buttons, and the arrow opens a panel of options for the list the cursor is in: a grid of marker styles, a number to start at, and a switch to count down. Each of the three is a setting of the List plugin, so a format can offer any of them.
- Put the cursor in the numbered list and open the arrow next to Numbered List: choose upper Roman, start at 4, reverse it.
- The bulleted list has only the style grid: a start number and a direction mean nothing to it.
- Indent nests the item under the one above it.
Table toolbars and property balloons
The table plugin brings the largest option interfaces in core. Inserting opens a grid that sizes the table under the pointer; the cursor in a table brings up a contextual toolbar of row, column and merge menus; and its last two buttons open balloon forms for the properties of the table and of the selected cells, with border style dropdowns, color inputs with a palette and a picker, dimensions, and alignment toolbars. Under a format that allows any HTML the two property plugins are on without being asked for.
- Insert table and move over the grid.
- Click in a cell: the table toolbar appears above the table.
- Table properties and Cell properties open balloon forms. Open a color field to see the palette and the color picker behind it.
- Select two cells by dragging, then Merge cells.
Image insertion, text alternative and resizing
With upload off, the image button inserts from a URL, through a balloon form. A selected image gets a contextual toolbar whose buttons depend on the format: the text alternative balloon with its decorative image switch comes with the image plugin, the caption toggle with the caption filter, the alignment buttons with the align filter, the resize dropdown with a setting of the image plugin, and the link button with the link plugin. Images are never uploaded here.
- Click the image: its toolbar appears above it.
- Change image alternative text opens a balloon with a text field and a Decorative image switch, which empties the alternative text and disables the field.
- Resize image lists the sizes; the handles on the corners of the image resize it by dragging.
- Insert image in the main toolbar opens a URL form. Any address of an image works, and is only fetched by the browser.
Contributed and custom plugins of this site
The plugins this site adds to core, with every option they have switched on. CKEditor Details puts a contextual toolbar on a details element whose switches set its attributes. The module links of this site add a switch to the link properties for each display of a module the format offers, which marks the link to be rendered as a card of that module.
- Click in the summary of the details: its toolbar offers Open by default, One open at a time and, once that is on, a field for the name of the accordion.
- Add accordion inserts a new details element.
- Click the drupal.org link, then Link properties in the toolbar above it: a switch for each module display, the first turned on.
Packages core ships and no plugin enables
Core carries more of CKEditor 5 than its plugins use: the font, highlight, find and replace, bookmark, mention and word count packages are in core/assets/vendor/ckeditor5 with no Drupal plugin to turn them on. This editor loads them directly. Together they cover the option interfaces the plugins above do not: color grids with a document palette and a picker, a split button of markers and pens, a dialog, an autocomplete in the text, and a status bar under the editing area. The mentions are names made up for the page.
- Font color and Font background color open a color grid, the colors already used in the text, and Color picker.
- Highlight is a split button: the left half applies the last marker, the arrow offers four markers, two pens and Remove highlight.
- Find and replace opens a dialog that can be dragged by its header and stays open while the text is edited.
- Type @ in the text, then a letter or two: a list of the people of the page appears under the cursor. Type # for the tags.
- Bookmark opens a balloon for the id of an anchor; the link form then lists the bookmarks of the text.
- The word and character counts under the editing area change as you type.
Plugins written for this page
Three plugins of mantra_examples, built for nothing but showing the option interfaces CKEditor 5 offers a plugin author and no plugin of the site uses, and two link decorators core does not expose. They are added to this editor alone and are not plugins any text format can enable. Abbreviation is a balloon form with a header, two labeled fields and validation. Callout is a block widget inserted from a dropdown list, with a contextual toolbar of type buttons and a switch. Placeholder is an inline widget inserted from a dropdown of grouped items, with a switch in the same list that changes how every placeholder is shown.
- Select a word and click Abbreviation: fill in the title and save. Saving with the abbreviation empty shows the error under the field. Click in an existing abbreviation to edit or remove it; Esc or a click outside closes the balloon.
- Insert callout lists the three types. Click in a callout to get its toolbar: change the type, or turn Dismissible on.
- Insert placeholder lists placeholders under two group headings; turn on Show sample values at the bottom of the list to see every placeholder replaced by an example.
- Click the link, then Link properties in the toolbar above it: two switches, Open in a new tab and Downloadable. They are CKEditor 5 manual decorators, set in the editor configuration, and the button only appears when there are some.