Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  • When inserting icons, you should hard code the icons by switching to Source mode (Full HTML) in the CKEditor5 toolbar.

  • Once you are in Source mode. You can now hard code any Bootstrap Icon and or Font Awesome Icon by wrapping it with a <p> tag and <em> tag and adding a %nbsp; inside the <i> tag. See below for an example.

...

Info

For more information on finding the right icon, please refer to the Bootstrap Icons and Font Awesome Icons libraries online.

Line Break and Empty Paragraph Handling in CKEditor 5

In CKEditor5, the automatic insertion of <br> tags typically occurs due to the editor’s handling of line breaks and empty paragraphs. This behavior is part of the editor’s design to ensure proper formatting and a consistent user experience.

Three Reasons Why CKEditor5 does Automatic <br> Insertions:

Empty Paragraph Handling
CKEditor5 often inserts <br> tags in empty paragraphs to maintain consistency and ensure that empty lines are rendered properly.

Soft Line Breaks
When users press Shift+Enter, CKEditor5 inserts a <br> tag to create a line break within the same paragraph rather than ending the paragraph.

Browser Compatibility
Different browsers handle empty elements and line breaks in varying ways. CKEditor5 uses <br> tags to standardize this behavior across all browsers.