https://github.com/ckeditor/ckeditor5-tutorials-examples
https://github.com/ckeditor/ckeditor5-tutorials-examples
Last synced: 12 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/ckeditor/ckeditor5-tutorials-examples
- Owner: ckeditor
- License: other
- Created: 2022-06-22T11:43:00.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2024-12-16T09:37:58.000Z (over 1 year ago)
- Last Synced: 2025-06-03T09:13:03.060Z (about 1 year ago)
- Language: CSS
- Size: 7.27 MB
- Stars: 24
- Watchers: 10
- Forks: 27
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-ckeditor - CKEditor Official Tutorials - Official tutorials sources. (Showcases)
README
# Tutorials for CKEditor 5
This repository contains the source code for CKEditor 5 tutorials. Each package has starter files and the final code for each tutorial (or part).
All tutorials can be found in [the CKEditor 5 framework documentation](https://ckeditor.com/docs/ckeditor5/latest/framework/index.html).
## How to run a tutorial package?
After cloning this repository, go into the directory of the tutorial and install all the dependencies first.
```bash
npm install
```
Under the hood, each tutorial uses [Vite](https://vitejs.dev/) as a module bundler. You can start a development server using the below command.
```bash
npm run dev
```
After running the command, you should be able to see the tutorial project in the browser at localhost and a specific port, most likely - [http://localhost:5173/](http://localhost:5173/). The development server provides a Hot Module Replacement over native ES modules. It means that any update to the tutorial will be reflected immediately in the browser. Don't hesitate to tinker and experiment!
## Tutorials
* [Creating a basic plugin - Timestamp](https://ckeditor.com/docs/ckeditor5/latest/framework/tutorials/creating-simple-plugin-timestamp.html)
* Creating an advanced plugin - Abbreviation
* [Part 1](https://ckeditor.com/docs/ckeditor5/latest/framework/tutorials/abbreviation-plugin/abbreviation-plugin-level-1.html)
* [Part 2](https://ckeditor.com/docs/ckeditor5/latest/framework/tutorials/abbreviation-plugin/abbreviation-plugin-level-2.html)
* [Part 3](https://ckeditor.com/docs/ckeditor5/latest/framework/tutorials/abbreviation-plugin/abbreviation-plugin-level-3.html)