CKEditor 5

A slightly closed laptop lid exuding a brilliant color display of an abstract pattern and the screen lightly reflecting the keyboard keys.

CKEditor Enhancements Coming

  • by Jessica L Hayes
A bundle of joy is coming your way! A feature request for the ability to highlight text has resulted in the addition of a plug-in bundle that addresses multiple requests. Read on to learn what's coming in our September 13th deployment.
A chalkboard with the words problem and solution, with a red line scratched through the word problem.

"When I try to edit my page, the WYSIWYG is blank"

  • by Jessica L Hayes
Have you had this experience? You click to Edit a page, but when you view the WYSIWYG it's collapsed and empty. Nothing you do allows you to click inside it and it seems like your content is inaccessible. It's all the fault of an image in a feature box on your page. Let's look at how to fix it.

Alert Styles

Alert styles require the user to insert a <div> tag directly into the page's Source code around the text before the style can be applied.

Paragraphs and Styles

In CKEditor5 the icon bar separates semantic headings and visual styles into the Paragraph menu and Styles menu. These can be used independently of each other depending on which type of text you want to affect.

The Paragraph Menu

Paragraph includes all text headings from normal paragraph text, and Headings 2-6, which are intended to be used semantically to indicate nested levels of headings. 

Layout Columns Widget

This widget, available from the WYSIWYG's icon bar, gives you the ability to insert a box row containing up to a maximum of four columns. Configuration settings provide a variety of column width options along with style options for how the box is presented on the page to give it visual splash.

Special Characters

Sub- and Superscript

Subscript and superscript formats are available from your WYSIWYG's Text Extras menu.

 

 

To apply either format:

  1. Type in the text to appear as sub- or superscript.
  2. Highlight the target text.
  3. Click the appropriate subscript icon or superscript icon .

 

Upload, embed, and link to files into your page content

The system allows you to embed files into your text in two different ways; through the Media Library or through the Insert File icon. Ideally, you should only be using the Insert Media icon, but here's an outline as to why:

Insert a Page Anchor

Page anchors are links internal to your site that allow a visitor to jump to a new, very specific location, either within the same page or in another page in your site.

Adding images

Adding images via the WYSIWYG
  1. To add images to your content type or block via the Body WYSIWYG, click on the Image icon 
  2. This will bring up the Add or select media dialog box:
Subscribe to CKEditor 5 Content