Override CKEDITOR
Override the default CKEDITOR with your own plugins, toolbar, etc.
Last updated
Was this helpful?
Override the default CKEDITOR with your own plugins, toolbar, etc.
Last updated
Was this helpful?
To override the CKEDITOR with your own custom plugins and default configurations you will need to clone the ckeditor5 repository, add your own custom code, and then build and put the script into your application. This tutorial will go over the steps on how to achieve this by going through an example of adding the underline tool to the CKEDITOR toolbar.
In order to create your own custom ckeditor you will need to extend the repository with your own custom plugins and imports.
Start by downloading the files from
Run yarn install or npm install
Install your plugins
import the plugin into src/ckeditor.js (In this example we will be importing the underline plugin)
In the ClassicEditor.bultinPlugins property add the import(s) to the list
Optional: If you would like all your ckeditors to have the underline tool then you can add 'underline' to ClassicEditor.defaultConfig.toolbar.items
Run yarn build or npm run build
You should now see build/ckeditor.js. This will be put into your application in the upcoming next steps
Now that you have bundled your extended ckeditor, the next thing to do is to put it into your application. This tutorial will create a barebones index.html file as our application and use <script> tags to import Formio and the ckeditor (If you already have an application then you may want to skip some of the following steps)
Start by creating a new project folder
In your project folder create a file called index.html and add the following to the file
Then copy the build/ckeditor.js file created earlier into your project folder. Your project folder should look something like this
Then locally serve your index.html file and you should now see the underline option in your toolbar.
