Strapi CKEditor5 plugin
Replace default Strapi markdown WYSIWYG editor with enhanced build of HTML CKEditor 5.👀 Live Demo
Features
- Enhanced build of CKEditor 5 with more capabilities then Classic Editor build
- Extensive set of features for your rich content
- Optional editor customization
- Automatically upload Inserted images to Media Library (thanks to ckeditor5-strapi-upload-plugin)
- Media Library button to insert stored images directly to the editor 🔥
- Automatic translation of UI into selected in Strapi language 🔥 (Strapi v3)
- Full screen mode 🔥
How to try
Check out 👀 live demo where you can test most of the features.How to install
Strapi v4 (work in progress)
Go to your Strapi project folder and executenpm i strapi-plugin-ckeditor5@latest
Don't forget to rebuild Strapi
npm run strapi build
Strapi v3
Go to your Strapi project folder and executenpm i strapi-plugin-ckeditor5@1.14.0
Don't forget to rebuild Strapi
npm run strapi build
How to remove unused buttons (Strapi v3)
See customization guide.How to customize editor (optional, Strapi v3)
If you want to change appearance of the editor or remove unused buttons you can add a custom CKEditor configuration to override default settings:- Go to your Strapi folder
- Copy template config file
node_modules/strapi-plugin-ckeditor5/admin/src/config/ckeditor.js
toextensions/ckeditor5/admin/src/config
- Set up
extensions/ckeditor5/admin/src/config/ckeditor.js
(see CKEditor configuration guide)
- Rebuild Strapi
npm run strapi build
Configuration example (Strapi v3)
// ckeditor.js
module.exports = {
// Override toolbar config to leave a few buttons
toolbar: {
items: [
"heading",
"|",
"bold",
"italic",
"link",
"alignment",
"|",
"undo",
"redo",
],
},
};