Hero Image

CKEditor

IWP: How To Use IWP Text Editor (CKEditor5)

Integrated Web Platform’s text editor is CKEditor also known as the WYSIWYG ("What You See Is What You Get") toolbar.  This text editor provides a flexible and user-friendly interface for formatting and styling content. This guide covers the basic features available in the editor to help you effectively manage text, inserting media, and layout elements in content types and group types.

Editor Options:

ckeditor-5 menubar

Toolbar Options:

  • Undo and Redo: Undo reverts your last action, while Redo reapplies an undone action.
  • Paragraph: Set text blocks as paragraph elements—the default style for body text.
  • Bold, Italic, Underline (B, I, U): Highlight text and click the B, I, or U icons to apply bold, italic, or underline formatting for emphasis or stylistic purposes.
  • URL Link: To add a hyperlink, highlight the desired text and click the chain link icon to input the URL. For advanced options like target="_blank" or adding ARIA labels, access Source mode to manually edit the HTML.
  • Anchor: Click the flag icon to add an anchor tag and enter the name in the popup. To edit or delete the anchor, click the flag icon again to access the options.
  • Insert Media: Use the media icon to open the media library and insert images, documents, remote videos, or videos from your existing library—or upload new ones if needed. Selected media will be placed where the cursor is positioned.
  • Alignment: Align text or media elements (left, center, right, justified). Avoid excessive use of center or justified alignment, as it may pose accessibility challenges.
  • Bulleted and Numbered Lists: Insert/remove a bulleted list for unordered items or a numbered list for items that require a sequence.
  • Indent Controls: Use Increase Indent or Decrease Indent to adjust the level of bullet or numbered list items.
  • Remove Formatting (Tx): This button clears unnecessary formatting from copied text, removing elements like spans, divs, or inline styles.
  • Table: Insert tables to organize tabular data (not for page layout). After creating a table, additional options like Add/Remove Columns/Rows, Merge/Split Cells, and Table Properties are available for adjusting structure and settings. Tables should be used for data representation only.
  • Block Quote: Apply block quote formatting by selecting text and clicking the quote icon, adding a visual distinction to quoted content. This feature will visually distinguish the quoted text with a line on the left and a unique format.
  • iFrame: Embed an iFrame by specifying the URL, name, width, height (in px), and advisory title. You can also opt to remove it from tab index for improved keyboard navigation.
  • Source: Access the source code directly for advanced HTML editing or custom tag insertion. This allows advanced users to make adjustments or embed additional elements. Important note: Some HTML tags and attributes are removed/filtered out, so not everything entered into HTML editor will appear on page.

Additional Notes

  • Media Library: The media upload option functions as a repository where all uploaded media (e.g., images, documents, remote videos) is stored and can be accessed across different content types.
  • Accessibility Considerations: When applying certain formatting (like alignment or bold text), consider accessibility best practices to ensure that all users can navigate and understand the content.
  • Preview Content: You can use the preview button to view changes before saving to see how the content will appear to site visitors.