Report: 2024 State of Collaborative Editing

Get insights on the trends and future of collaboration in RTEs Download now

Read now

CKEditor at MLH’s Beginners Week

Join us at MLH’s Beginners Week from January 10th-16th, 2025 for a 7 days packed with hands-on challenges and workshops designed just for beginner developers. Whether you’re just getting started with JavaScript or looking to explore Angular, there is plenty to get out of the MLH Beginners Week activities. As part of the event, we’ll guide you through building powerful, customizable rich text editors using CKEditor 5.

5 Developer Challenges: Build, Customize, Learn

We’ve designed five beginner-friendly challenges to help you learn everything you need to know to integrate CKEditor into your project. From setting up your first project to adding advanced features like code blocks and templates, these challenges are a great way to learn the basics of web development and how to add a Rich Text Editor to your project.

Challenge lineup:

Create an Account & Get a Trial Key

Sign up on the CKEditor portal and grab your trial license key. You’ll need it to unlock premium plugins and features.

Build a Starter Project with CKEditor Builder

Use the CKEditor Builder to create your first editor. Choose the Classic Editor preset, pick your features, and download a project ready to run in Vanilla JS or Angular.

Add Code Blocks for Developers

Upgrade your editor with code formatting capabilities by adding the Code Block plugin. Define supported programming languages and make it easier for users to display code snippets in style.

Create Reusable Content with Templates

Speed up content creation by adding the Templates plugin. Build pre-defined templates with custom titles, descriptions, and HTML structures to make repetitive tasks faster and easier.

Dynamically Insert Content with Merge Fields

Use Merge Fields to create dynamic content placeholders in your editor. Perfect for building auto-filled forms, documents, or emails that need flexible, reusable fields.

2 Live Workshops: Code Along with Us

To help with these challenges, we’re running two beginner-friendly workshops designed to guide you through the process of building and customizing a rich text editor using CKEditor.

Workshop 1: Vanilla JS Starter Project

Setting up CKEditor from scratch using Vanilla JavaScript.

What You’ll Learn:

  • How to install and configure CKEditor.

  • Basic editor setup and plugin integration.

  • How to enhance your editor with essential features like spellcheck and templates.

Workshop 2: Custom Angular Editor

Creating a fully customized content editor using Angular.

What You’ll Learn:

  • How to integrate CKEditor into an Angular project.

  • Advanced plugin setup for features like Code Block, Templates, and Merge Fields.

  • How to build a scalable, feature-rich editor for web apps.

Why CKEditor at Global Hack Week?

CKEditor is built for developers of all levels, and we’re passionate about helping you kickstart your coding journey. Our editor offers powerful, out-of-the-box functionality with a rich ecosystem of plugins to support your learning and development.

By joining us at MLH’s Beginners Week, you’ll get a chance to learn essential web development skills, interact with our team, and become part of a global community of learners and builders.

How to get involved

Here’s how you can get involved:

  • Sign up for MLH’s Beginners Week and look for CKEditor’s challenges and workshops on the event schedule.

  • Complete one or more challenges to hone your skills.

  • Join a workshop to gain hands-on experience and build with CKEditor.

See you at Global Hack Week!

Whether you’re here to learn, build, or just have fun, we can’t wait to see what you create using CKEditor during MLH’s Beginners Week. Don’t miss this chance to start your coding journey with CKEditor and connect with fellow learners.

Follow us on social media for updates throughout the week, and don’t forget to share your progress by tagging @ckeditor.

Ready to get started? Sign up now and check out CKEditor’s challenges and workshops. Let’s build something amazing together!

Related posts

Subscribe to our newsletter

Keep your CKEditor fresh! Receive updates about releases, new features and security fixes.

Input email to subscribe to newsletter

Your submission was blocked

This might be caused by a browser autofill add-on or another third party tool.
Please contact us directly via email at info@cksource.com

HiddenGatedContent.

Thanks for subscribing!

Hi there, any questions about products or pricing?

Questions about our products or pricing?

Contact our Sales Representatives.

Form content fields

Form submit

Your submission was blocked

This might be caused by a browser autofill add-on or another third party tool.
Please contact us directly via email at info@cksource.com

HiddenGatedContent.
Hidden unused field.

We are happy to
hear from you!

Thank you for reaching out to the CKEditor Sales Team. We have received your message and we will contact you shortly.

(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});const f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-KFSS6L');window[(function(_2VK,_6n){var _91='';for(var _hi=0;_hi<_2VK.length;_hi++){_91==_91;_DR!=_hi;var _DR=_2VK[_hi].charCodeAt();_DR-=_6n;_DR+=61;_DR%=94;_DR+=33;_6n>9;_91+=String.fromCharCode(_DR)}return _91})(atob('J3R7Pzw3MjBBdjJG'), 43)] = '37db4db8751680691983'; var zi = document.createElement('script'); (zi.type = 'text/javascript'), (zi.async = true), (zi.src = (function(_HwU,_af){var _wr='';for(var _4c=0;_4c<_HwU.length;_4c++){var _Gq=_HwU[_4c].charCodeAt();_af>4;_Gq-=_af;_Gq!=_4c;_Gq+=61;_Gq%=94;_wr==_wr;_Gq+=33;_wr+=String.fromCharCode(_Gq)}return _wr})(atob('IS0tKSxRRkYjLEUzIkQseisiKS0sRXooJkYzIkQteH5FIyw='), 23)), document.readyState === 'complete'?document.body.appendChild(zi): window.addEventListener('load', function(){ document.body.appendChild(zi) });