Skip to main content

Challenge 1: Use Builder to create a starter project

Learn how to use CKEditor with these hands on challenges!
Challenge 1: Use Builder to create a starter project background
Challenge

Challenge 1: Use Builder to create a starter project

Objective: Get your project up and running

Steps to Complete:

  • Go to the Builder: Open the CKEditor Builder to start customizing your editor.
  • [Presets step]: Choose the Classic Editor (starter) preset as the foundation for your project.
  • [Features step]: Pick Features (some of them are already preselected). 💡You can use Advanced view to see more granular selection.
  • Text formatting:
    • Bold
    • Italic
    • Link
  • Content & Block Formatting
    • Links
      • Link
      • Autolink
  • Productivity
    • ** Emoji** (Automatically selects Mention*)
  • [Toolbar step]: Customize the Toolbar: Customize the toolbar for an optimal experience. 💡You can keep default selection if you want.
  • [Installation step]: Download the project:
    • Follow the setup steps provided by CKEditor Builder to generate the starter project with:
    • Vanilla JS as technology
    • Self-hosted (npm) as an integration method
  • [Locally]
    • Unpack the project
    • Open it in terminal - ideally the one integrated in your favorite IDE (VSCode recommended)
    • Run npm install to install dependencies
    • Run npm start and see http://localhost:5173/index.html
    • Use the Tools from toolbar to prepare a callout about you, your hobby, or something you like
    • 🥑 [Optional] - take a screenshot and post it to your favorite social media

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

Submit your project