Sunday, August 1, 2021

Spring Boot Bootstrap Thymeleaf Rich Text Editor

 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.java
import 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.java
import 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;
	}

}

No comments:

Post a Comment