CKEditor 5 logo - - all rights reserved to the company that owns this logo
CKEditor 5 -

CKEditor 5 comes to SiteFarm

Prepare for a streamlined WYSIWYG user experience

Hello everyone,

Our next upcoming release will be arriving this weekend and you’ll be noticing an update to SiteFarm’s WYSIWYG text area icons as we’re updating the CKEditor module from version 4 to version 5. 

The majority of the functions and features you’re accustomed to using are still there, but you’ll notice immediately that the icon bar has been streamlined into one bar instead of two to present a decluttered user experience. The other icons are tucked away in submenus in a few different sections of the bar and still easily accessible.

Screenshot of the ckeditor WYSIWYG icon bar.


Our New and Updated Documentation page will be updated next week to reflect which instructions have been updated by CKEditor 5's release in the event you’re uncertain where to find or use a particular feature.

A highlight of changes

A few changes are noticeable, and we want to make certain to highlight them here to prepare you for the update and reassure you our documentation will reflect the updates so you can get the guidance you need to accomplish your goals.

Paragraphs Menu
Assigning a semantic heading will be its own step and easily assigned by highlighting your text and clicking on the desired heading preference.

Paragraph styles menu icon ckeditor 5

Styles Menu
Styles are the visual formats you can apply to various elements such as titles, pullquotes, tables, lists, buttons, multi-column text, and alert boxes. One significant difference here is that, in some specific cases, you can select and apply more than one offered style to an element.

Styles menu icon ckeditor 5

Sub- and Superscript
Originally part of the Special Characters section of CKEditor 4 with supported documentation for copying/pasting certain notations from other sources, you now have in-page icons for converting typed text into subscript and superscript text.

Subscript icon ckeditor 5


Superscript icon ckeditor 5

Numbered Lists
Specific to numbered lists you can now indicate the number you wish to have the list being with and also indicate if it should reverse the count in descending instead of ascending order.

Numbered lists menu icon ckeditor 5

Quotes/Pull quotes
Users will need to take an additional step for pull quotes. Create your text, highlight and click the quotes icon. Then, from the Styles menu apply the pull quote style. If you would like to style the author/source credit, you will highlight that portion and click the Italic icon.

Pull quote icon ckeditor 5

A nice usability update is part of the change to the Tables section. Once you’ve set your table’s initial size (number of columns and rows), a floating icon menu will be available, above or below the table, giving you access to property menus to change the number of rows or columns, merge cells, and include a table caption, which you want to do because it’s an accessibility requirement. 

Table size selector

Image properties
When you place an image inside the WYSIWYG you will also note that the “Edit media” button is no longer available. Instead you’ll click on the piece of media directly to access its properties menu:

  • Toggle caption on
  • Link media
  • Override media image alternative text
  • View mode size
  • Break text, left align
  • Align left and wrap text
  • Break text, center align
  • Align right and wrap text
Image properties menu

Code/Insert Code Block
While likely to only see niche use outside of our team’s training documentation, the new CKEditor 5 includes two Code features. Code icon will apply a standard code style to example code typed on the page to differentiate it from regular text. The Insert Code Block icon will embed a div tag style to match the markup/language you plan to display a formatted output for easier reading that mimics software development environments.

Code icon ckeditor 5


Code block icon ckeditor 5


Primary Category

Secondary Categories

Site Building User Experience Tips, Hints, Best Practices