CKEditor with strapi

CKEditor5 react is a modern JavaScript-rich text editor with a modular architecture. It is one of the most used free WYSIWYG rich text editors used because of it is clear UI and customization features.

Generate Plugin

            Path – my-app

npm run strapi generate:plugin wysiwyg

Install CKEditor dependencies

Path –  ./plugin/wysiwyg

npm i @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-classic

Implementing CKEditor

Path  – ./plugins/wysiwyg/admin/src/components/CKEditor/index.js

Note – You have to create the folder manually in the src

          Ex –  /components/CKEditor/index.js


Add this code in index.js file


export default Editor;

the main component should be null and remove the menu key object.

Path – ./plugins/wysiwyg/admin/src/index.js

Replace this code

Remove this code

Add registerField method before return

Path – ./plugins/wysiwyg/admin/src/index.js

Import CKEditor

Add this code

Run command after changes done

  1. npm run build
  2. npm run develop


One thought on “CKEditor with strapi

Leave a Reply