CKEditor 5

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

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:

Photo Gallery content type

What should you use the Photo Gallery page content type for?

The Photo Gallery page is intended to be used for creating albums and image galleries for display on your site.