Getting Started
DevelopersDeployment GuideGet Help

Override CKEDITOR

Override the default CKEDITOR with your own plugins, toolbar, etc.

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.

Extending the ckeditor repository

In order to create your own custom ckeditor you will need to extend the ckeditor5-build-classic repository with your own custom plugins and imports.

  1. Start by downloading the files from ckeditor5-build-classic

  2. Run yarn install or npm install

  3. Install your plugins

  4. import the plugin into src/ckeditor.js (In this example we will be importing the underline plugin)

    import Underline from "@ckeditor/ckeditor5-basic-styles/src/underline";

  5. In the ClassicEditor.bultinPlugins property add the import(s) to the list

    ClassicEditor.builtinPlugins = [
    Essentials,
    UploadAdapter,
    Autoformat,
    Bold,
    Italic,
    Underline,
    ...

  6. Optional: If you would like all your ckeditors to have the underline tool then you can add 'underline' to ClassicEditor.defaultConfig.toolbar.items

ClassicEditor.defaultConfig = {
    toolbar: {
       items: [
          'heading',
          'fontFamily',
          'fontSize',
          '|',
          'bold',
          'italic',
          'link',
          'bulletedList',
          'numberedList',
          '|',
          'indent',
          'outdent',
          '|',
          'imageUpload',
          'blockQuote',
          'insertTable',
          'mediaEmbed',
          'alignment:left',
          'alignment:right',
          'alignment:center',
          'undo',
          'redo',
          'underline'
       ]
    },

  1. Run yarn build or npm run build

  2. You should now see build/ckeditor.js. This will be put into your application in the upcoming next steps

Adding ckeditor to your application

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)

  1. Start by creating a new project folder

  2. In your project folder create a file called index.html and add the following to the file

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Document</title>
        <script src="./ckeditor.js"></script>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css">
        <script src='https://cdn.form.io/js/formio.full.min.js'></script>
    </head>
    <body>
        <div id="formio"></div>
        <script>
            Formio.createForm(document.getElementById('formio'), {
                components: [
                    {
                        "label": "Text Area",
                        "applyMaskOn": "change",
                        "editor": "ckeditor",
                        "autoExpand": false,
                        "tableView": true,
                        "validateWhenHidden": false,
                        "key": "textArea",
                        "type": "textarea",
                        "isUploadEnabled": false,
                        "wysiwyg": {
                            "toolbar": ['undo', 'redo', 'underline', 'bold'],
                            "rows": 3,
                            "base64Upload": true,
                            "mediaEmbed": {
                                "previewsInData": true
                            }
                        },
                        "input": true
                    }
                ]
            }, {})
        </script>
    </body>
</html>

  1. Then copy the build/ckeditor.js file created earlier into your project folder. Your project folder should look something like this

  2. Then locally serve your index.html file and you should now see the underline option in your toolbar.

PreviousDynamic Radio and Select Box ValuesNextErrors

Last updated