Skip to main content

Challenge 3: Add template functionality to CKEditor

Learn how to use CKEditor with these hands on challenges!
Challenge 3: Add template functionality to CKEditor background
Challenge

Challenge 3: Add template functionality to CKEditor

Objective: - Extend the configuration of the CKEditor and showcase premium features

Steps to Complete:

  • Head over to the starter project you built in the “Use Builder to create a starter project” challenge 1
  • [Add required plugins] Add Heading, Image, ImageCaption, ImageResize, ImageStyle, ImageToolbar plugins and register them to the plugins configuration
  • [Install the premium features] Install ckeditor5-premium-features package
    • Import Template plugin from the ckeditor5-premium-features package and it’s css.
    • Add Template plugin to your plugins array in the configuration and items array of the toolbar.
  • [Customize the Plugins]
    • Define the fixed set to the Mention plugin to allow mention @Alice, @Ben, @Carlos
    • Define following templates: Use one of the provided templates, or create your own.
  • [Create your landing page] CKEditor document template and place the MLH banner to it 🎉

Templates HTML:
CKEditor document template

<h2>Title of the document</h2><p>The content of the document. </p>A caption of the image.

MLH Banner template

A caption of the image.<p>Major League Hacking banner</p>

Resource: You can get a more detailed breakdown of how to complete this challenge with this CKEditor GitHub Repository.

Submit your project