Can I use ckEditor using Thymeleaf in Spring Boot environment?

<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorator="layout/default">

<title>Make Page</title>
<script th:inline="javascript" src="https://cdn.ckeditor.com/ckeditor5/27.1.0/classic/ckeditor.js">
</script>

<body layout:fragment="content">
<div style="text-align: center">
<h1>write page</h1>
<form  th:action="@{/createDiary}" th:object="${Diary}" method="post">
    <p>writer : <input type="text" th:field="*{writer}"/></p>
    <p>title : <input type="text" th:field="*{title}"/></p>
    <p>content : <input  style="width: 300px; height: 300px;" type="text" th:field="*{content}"/></p>
    <p><input type="submit" value="add"/> <input type="reset" value="reset"/></p>
</form>
</div>
</body>
</html>

I did this, but it didn't work. So I tried another way

<script th:inline="javascript" src="https://cdn.ckeditor.com/ckeditor5/27.1.0/classic/ckeditor.js">
</script>

Changed to

<script src="https://cdn.ckeditor.com/ckeditor5/27.1.0/classic/ckeditor.js"></script>

I still can't look at it. What am I doing wrong?

Is it because Javascript is not used in Timeleaf? Then, is it impossible to use ckeditor?

Solution

According to the documentation, you need a <script> tag to load the libary and a bit of JavaScript to setup. So your example should be something like this:

<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorator="layout/default">
<head>
  <title>Make Page</title>
  <script src="https://cdn.ckeditor.com/ckeditor5/27.1.0/classic/ckeditor.js">
</script>
</head>

<body layout:fragment="content">
  <div style="text-align: center">
    <h1>write page</h1>
    <form  th:action="@{/createDiary}" th:object="${Diary}" method="post">
      <p>writer : <input type="text" th:field="*{writer}"/></p>
      <p>title : <input type="text" th:field="*{title}"/></p>
      <p>content : <input  style="width: 300px; height: 300px;" type="text" th:field="*{content}"/></p>
      <p><input type="submit" value="add"/> <input type="reset" value="reset"/></p>
    </form>
  </div>
  <script>
        ClassicEditor
            .create( document.querySelector( '#content' ) )
            .catch( error => {
                console.error( error );
            } );
  </script>
</body>
</html>