Integrating CKEditor 5 with Spring Boot from ZIP

As a pure JavaScript/TypeScript application, CKEditor 5 will work inside any environment that supports such components. While we do not offer official integrations for any non-JavaScript frameworks, you can include a custom configuration of CKEditor 5 rich-text editor in a non-JS framework of your choice, for example, the Java-based Spring Boot.

Setting up the project

This guide assumes you already have a Spring Boot project. You can create a basic Spring Boot project using Spring Initializr. Refer to the Spring Boot documentation to learn how to set up a project in this framework.

This guide is using the “Spring Web” and “Thymeleaf” dependencies selected in the Spring Initializr. Here is the list of dependencies used in the demo project:

<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-test</artifactId>
        <scope>test</scope>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
</dependencies>

Integrating using ZIP

After downloading and unpacking the ZIP archive, copy the ckeditor5.js and ckeditor5.css files into the src/main/resources/static/ckeditor5/ directory. The folder structure of your app should resemble this one.

├── src
│   ├── main
│   │   ├── java
│   │   │   └── com
│   │   │       └── example
│   │   │           └── demo
│   │   │               └── DemoApplication.java
│   │   └── resources
│   │       ├── static
│   │       │   ├── ckeditor5
│   │       │   │   ├── ckeditor5.js
│   │       │   │   └── ckeditor5.css
│   │       │   └── ...
│   │       ├── templates
│   │       │   ├── ckeditor5.html
│   │       │   └── ...
│   │       └── application.properties
│   └── test
├── pom.xml
└── ...

Having all the dependencies of CKEditor 5, create or modify the index.html file in the src/main/resources/templates directory to import them. All the necessary markup is in the index.html file from the ZIP archive. You can copy and paste it into your template. Pay attention to the paths of the import map and CSS link – they should reflect your folder structure. The template should look similar to the one below:

Note

Starting from version 44.0.0, the licenseKey property is required to use the editor. If you use a self-hosted editor from ZIP:

You must either comply with the GPL or
Obtain a license for self-hosting distribution.

You can set up a free trial to test the editor and evaluate the self-hosting.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>CKEditor 5 - Spring Boot Integration</title>
        <link rel="stylesheet" href="/assets/vendor/ckeditor5.css">
        <style>
            .main-container {
                width: 795px;
                margin-left: auto;
                margin-right: auto;
            }
        </style>
    </head>
    <body>
        <div class="main-container">
            <div id="editor">
                <p>Hello from CKEditor 5!</p>
            </div>
        </div>
        <script type="importmap">
            {
                "imports": {
                    "ckeditor5": "./ckeditor5/ckeditor5.js",
                    "ckeditor5/": "./ckeditor5/"
                }
            }
        </script>
        <script type="module">
            import {
                ClassicEditor,
                Essentials,
                Paragraph,
                Bold,
                Italic,
                Font
            } from 'ckeditor5';

            ClassicEditor
                .create( document.querySelector( '#editor' ), {
                    licenseKey: '<YOUR_LICENSE_KEY>', // Or 'GPL'.
                    plugins: [ Essentials, Paragraph, Bold, Italic, Font ],
                    toolbar: [
                        'undo', 'redo', '|', 'bold', 'italic', '|',
                        'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor'
                    ]
                } )
                .then( editor => {
                    window.editor = editor;
                } )
                .catch( error => {
                    console.error( error );
                } );
        </script>
    </body>
</html>

To make the HTML editor work with Spring Boot, you need to create a controller to serve the HTML page. Create a file named HomeController.java in your project’s main package:

package com.example.demo;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class HomeController {

    @GetMapping("/")
    public String home() {
        return "index";
    }
}

Finally, run your Spring Boot application using ./mvnw spring-boot:run (or mvnw.cmd spring-boot:run on Windows) and navigate to http://localhost:8080 to see the editor in action.

Next steps

See how to manipulate the editor’s data in the Getting and setting data guide.
Refer to further guides in the setup section to see how to customize your editor further.
Check the features category to learn more about individual features.

Integrating CKEditor 5 with Spring Boot from ZIP

Create your own CKEditor 5

Setting up the project

Integrating using ZIP

Next steps