We as a Developer often required to use CKEditor into our application according to the requirements or need of the app, however I find that when it comes to installing it with ReactJS you can install it easily with its default configuration, however when you need customize it becomes critical and problematic.
In this article I am going to solve the same problem, I will give you a solution on how you can install CKEditor and customise it as your needs.
After following this article, you will be able to utilize CKEditor 5 with custom menus in your ReactJS app without any issues.
Table of Contents
Things you will required to customize CKeditor
Before going to start customizing CKdditor you need to have following things installed on your system:
- Code Editor
- git
- NodeJs (npm)
Clone CKEditor on your System:
git clone https://github.com/ckeditor/ckeditor5.gitCustomize CKEditor Package:
Now we have the CKEditor Codebase to work with, in my case I am going to custom the classic package, for you it can be any one from the list available packages and obviously depending on your needs.
So, navigate into the package of you need:
cd ckeditor5/packages/ckeditor5-editor-classicCreate new branch for your custom changes, as showing below:
git checkout -b custom-build
npm install Now open the package codebase in your favorite editor, in my case it is Visual Studio Code.
You can make changes to the src/classiceditor.js. Like removing the unwanted menu or adding an additional required menu and so on.
When you done making changes, we need to build the CKEditor using npm.
npm run build Install Customized CKEditor build into your application:
Now we are ready to use our custom build into the application, all you need to do is to install it using the npm (node pakcage manager)
Navigate into the project from Terminal
npm install <path>/ckeditor5/packages/ckeditor5-editor-classic --legacy-peer-depsDone, that is it you are ready to use the custom build of CKEditor
Next you can customize more if you want.
One more thing I have followed the local package approach here just to be speedy in the development process.
Source Control:
You can also fork the CKEditor into your github account and clone the same repo and push all your custom changes into your repository.
This will help you to manage your custom changes.
Hope this tutorial helped you to customize the CKEditor the way you want, if you have question feel free to comment below.
