본문 바로가기

Spring Framework

Thymeleaf(타임리프)를 사용하여 HTML 렌더링 하기

summernote (글쓰기 에디터)를 사용하여 글을 입력후 다시 DB에서 값을 뽑아낼때

summernote에서 html태그가 렌더링 되지 않은채로 그대로 출력되는 경우가있음

 

예를들어)

DB에서 안녕하세요 라는 값을 클라이언트에 뿌려줄때

<p>안녕하세요</p> 이렇게 html 태그가 같이 출력되는 현상이 생김

 

HTML 렌더링 하는법 ( Thymeleaf 타임리프 사용 )

 

 

 

1. 타임리프 디펜던시 다운 

<dependency>
 <groupId>org.thymeleaf</groupId>
 <artifactId>thymeleaf</artifactId>
 <version>3.0.11.RELEASE</version>
</dependency>
		
<dependency>
  <groupId>org.thymeleaf</groupId>
  <artifactId>thymeleaf-spring4</artifactId>
  <version>3.0.11.RELEASE</version>
</dependency>

(아래 링크로 접속해서 artifactId를 똑같이 입력해주고 본인에 맞는 Spring version으로 받으면 됨)

https://mvnrepository.com/

 

 

2. jsp단에서 thymeleaf 사용법

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>글등록 / 수정</title>
</head>
<body>
	<div class="regContainer">
        <form id="frm" action="/board/reg" method="post" onsubmit="return chk()">            
            <textarea name="ctnt" id="description" th:utext="${html}">${data.ctnt}</textarea>                       
        </form>
    </div>
</body>
</html>

 

1. html 태그에 

    xmlns:th="http://www.thymeleaf.org"  추가

 

2. 글이 출력되는, 즉 렌더링 하고자하는 태그에서

  ex) <textarea name="" id="" th:utext="${html}"></textarea>

위와 같이 해줄경우 <textarea> 태그에 html 태그들이 렌더링 되어 출력됨

 

 

ex)

html 태그 렌더링 하지않은경우

<p>안녕하세요</P

 

html 태그 렌더링 한경우

안녕하세요