Using Camunda with Form.io

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.

Start by downloading the files from ckeditor5-build-classic
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)
```
import Underline from "@ckeditor/ckeditor5-basic-styles/src/underline";
```

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

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

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'
       ]
    },

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

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)

Start by creating a new project folder
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>

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.

PreviousSSO Email Token NextUsing TermHub with Form.io

Last updated 1 month ago

Was this helpful?