# 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**](https://github.com/formio/ckeditor5-build-classic) **repository** with your own custom plugins and imports.

1. Start by downloading the files from [**ckeditor5-build-classic**](https://github.com/formio/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'
       ]
    },
```

7. Run `yarn build` or `npm run build`
8. 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>

```

3. Then copy the build/ckeditor.js file created earlier into your project folder. Your project folder should look something like this&#x20;

   <figure><img src="https://2053155777-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdE1To8ypyE1yhXEJ7QlD%2Fuploads%2FAEJ9Pqw1q3qceGIsgnI5%2Fimage.png?alt=media&#x26;token=b911dae5-1dea-4b14-b9d0-5d883614e6a8" alt=""><figcaption></figcaption></figure>
4. Then locally serve your index.html file and you should now see the underline option in your toolbar.

<figure><img src="https://2053155777-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdE1To8ypyE1yhXEJ7QlD%2Fuploads%2Fm8lYkoIFAIDQgjq5Sbdr%2Fimage.png?alt=media&#x26;token=ff06aeaa-7b12-4877-9331-af5bd21a0e9c" alt=""><figcaption></figcaption></figure>
