我可以在 Spring 引导环境中使用 Thymeleaf 使用 ckEditor 吗？

Question

<!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>

我这样做了，但是没有用。所以我尝试了另一种方式

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

改为

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

还是看不下去。我做错了什么？

是不是Timeleaf中没有使用Javascript？那么，ckeditor是不是不能用了？

Answer 1

根据 the documentation，您需要一个 <script> 标签来加载库和一些 JavaScript 来设置。所以你的例子应该是这样的：

<!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>

我可以在 Spring 引导环境中使用 Thymeleaf 使用 ckEditor 吗？

Can I use ckEditor using Thymeleaf in Spring Boot environment?

html

ckeditor

thymeleaf