Скачать или смотреть Add Template & Mention Plugins to Existing Project [MLH GHW Beginners Week 2025 Aug Recap]

Learn how you can do development iterations both using CKEditor builder, or manually for more complex scenarios.

This beginner-friendly Major League Hacking Global Hack Week workshop walks through adding the premium features package (showcasing Template plugin), installing Heading and various image plugins, and combining them into ready-made reusable templates. The workshop wraps up with a CKEditor Inspector showcase and Q&A session.

This is the recap video from the original recording from Major League Hacking:    • [GHW Beginners Week] CKEditor Live Coding ...  

WHAT YOU’LL LEARN
• Summary of the previous webinar where you got the TypeScript starter    • From Vanilla JS starter to Typescript GitH...  
• How to add the Template plugin using CKEditor builder
• Manually install Heading and Image plugins
• Set up two templates that use both heading and image content
• Add CKEditor Inspector to your project for easier development

Skipping the intro?
``` ⌨️
git clone https://github.com/ckeditor/devrel-ml...
cd devrel-mlh-workshops-aug-2025
git checkout 16a45ae
```
And jump to 4:31

CHAPTERS
00:00 Intro
00:12 Kickoff & session overview
01:04 Missed The First Workshop? Sign‑up flow & portal context
01:53 What is CKEditor? Rich text editor use cases & frameworks
03:05 Portal overview: client vs. server features (real‑time collaboration)
03:52 Clone starter repo & open in VS Code
04:31 Code recap via git graph - previous workshop checkpoints
09:03 Add your license key
11:03 Add premium feature: Template plugin
14:37 Install premium features package
16:39 Resolve version mismatch
21:02 CKEditor code structure
23:44 Demo: Emoji, Link, and Template plugin
25:21 Commit: add Template plugin
28:00 Add Headings plugin + configuration
32:35 Showcase headings
34:00 Add Image plugin + configuration
39:17 Showcase image
40:49 Define the templates with heading and images
42:49 Showcase Inspector bookmarklet
45:30 Commit: configure Template plugin
47:06 Install ckeditor5‑inspector & wire up
50:13 Commit & wrap changes
51:01 Q&A: Templates + Merge Fields (use cases)
53:37 Q&A: Framework wrappers (React/Angular/Vue)
55:07 CKEditor demos hub & resources
56:01 Closing & next workshop

STACK / TOOLS
• CKEditor 5 (open‑source) + CKEditor 5 Premium Features (Templates plugin) + CKEditor Inspector
• JavaScript & TypeScript
• Node.js, Vite
• Git/GitHub

RESOURCES
• GitHub repo: https://github.com/ckeditor/devrel-ml...
• 📖 CKEditor Docs: https://ckeditor.com/docs
• 📺 Original video:    • [GHW Beginners Week] CKEditor Live Coding ...  

🔗 CKEditor — Official links & socials
• Website: https://ckeditor.com/
• GitHub: https://github.com/ckeditor
• X (Twitter): https://x.com/ckeditor
• LinkedIn:   / ckeditor  
• Facebook:   / ckeditor  

───────────────
#typescript #development #frontend #vanillajs #editor #plugins #javascript #templates #headings #images #wysiwyg