Spring Boot + Bootstrap + Thymeleaf Rich Text Editor
Download Minimal Rich Text Editor With jQuery And FontAwesome - RichText
cms.html<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Rich Text Editor -->
<title>RichText example</title>
<!-- <link rel="stylesheet"
th:href="@{/assets/richtext/font-awesome.min.css}"> -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" th:href="@{/assets/richtext/site.css}">
<link rel="stylesheet" th:href="@{/assets/richtext/richtext.min.css}">
<script type="text/javascript"
th:src="@{/assets/richtext/jquery.min.js}"></script>
<script type="text/javascript"
th:src="@{/assets/richtext/jquery.richtext.min.js}"></script>
<script type="text/javascript"
th:src="@{/assets/richtext/jquery.richtext.js}"></script>
<script>
$(document).ready(function() {
$('.content').richText();
});
</script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#navbar" aria-expanded="false"
aria-controls="navbar">
<span class="sr-only">Toggle navigation</span> <span
class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active"><a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a></li>
<li class="nav-item"><a class="nav-link" href="#">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
<br>
<br>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div th:if="${param.success}">
<div class="alert alert-info">You've successfully content to
our awesome app!</div>
</div>
<h1>Content Management System</h1>
<form th:action="@{/cms}" th:object="${post}" method="post">
<div class="form-group">
<label for="title">Title:</label> <input type="text" id="title"
placeholder="Title" autocomplete="off" class="form-control"
th:field="*{title}" />
</div>
<div class="form-group">
<label for="content">Content:</label>
<textarea type="text" rows="4" class="content"
placeholder="Content" th:field="*{content}" autocomplete="off"></textarea>
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
</div>
</div>
</div>
</body>
</html>
PostController.javaimport org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PostMapping;
import com.stock.analysis.entities.Post;
/**
* Standard Layout System with Fragment Expressions usage example
*/
@Controller
public class CmsController {
@ModelAttribute("module")
public String module() {
return "post";
}
@ModelAttribute("post")
public Post post() {
return new Post();
}
@GetMapping("/cms")
public String cmsEditor(Model model) {
model.addAttribute("post", new Post());
model.addAttribute("title", "new Titla");
model.addAttribute("content", "Hello");
return "cms";
}
@PostMapping
public String save(Post post, Model model) {
model.addAttribute("post", post);
return "cms";
}
}
Post.javaimport javax.persistence.Entity;
import javax.persistence.Id;
import javax.persistence.Table;
import io.swagger.annotations.ApiModelProperty;
import lombok.Getter;
import lombok.NoArgsConstructor;
import lombok.Setter;
@Setter
@Getter
@NoArgsConstructor
@Entity
@Table(name = "post")
public class Post {
@Id
@ApiModelProperty(notes = "Title")
private String title;
@ApiModelProperty(notes = "Content")
private String content;
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
public String getContent() {
return content;
}
public void setContent(String content) {
this.content = content;
}
}
