Summernote - Super Simple WYSIWYG editor
Super Simple WYSIWYG Editor on Bootstrap Summernote is a JavaScript library that helps you create WYSIWYG editors online.
summernote.org
파일을 직접 받아 추가할 수도 있고, cdn을 이용할 수도 있다.
https://summernote.org/getting-started/#installation
Summernote - Super Simple WYSIWYG editor
Super Simple WYSIWYG Editor on Bootstrap Summernote is a JavaScript library that helps you create WYSIWYG editors online.
summernote.org
나는 파일을 받아 적용하였다.
압축을 풀고 프로젝트에 복사한다.
파일은 lite 버전을 적용할 것이다. summernote css파일이 부트스트랩의 파일과 충돌할 수 있어 lite를 많이 사용한다고 한다.
layout.html
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<meta charset="UTF-8">
<title>트위치</title>
<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
<link th:href="@{/summernote/summernote-lite.min.css}" rel="stylesheet">
<script src="/js/jquery.js"></script>
</head>summernote-lite.min.css 추가
footer.html
<script src="/summernote/summernote-lite.min.js"></script>
<script src="/summernote/lang/summernote-ko-KR.min.js"></script>
</div>
</html>summernote-lite.min.js와 summernote-ko-KR.min.js 추가
두 번째 파일은 한글을 사용하기 위한 파일이다.
summernote를 적용하는 페이지 html 파일
<form method="post">
<textarea id="summernote" name="description"></textarea>
</form>
</div>
<script>
$(document).ready(function () {
$('#summernote').summernote({
// 에디터 높이
height: 300,
// 에디터 한글 설정
lang: "ko-KR",
// 에디터에 커서 이동 (input창의 autofocus라고 생각)
focus : true,
toolbar: [
// 글꼴 설정
['fontname', ['fontname']],
// 글자 크기 설정
['fontsize', ['fontsize']],
// 굵기, 기울임꼴, 밑줄,취소 선, 서식지우기
['style', ['bold', 'italic', 'underline','strikethrough', 'clear']],
// 글자색
['color', ['forecolor','color']],
// 표만들기
['table', ['table']],
// 글머리 기호, 번호매기기, 문단정렬
['para', ['ul', 'ol', 'paragraph']],
// 줄간격
['height', ['height']],
// 코드보기, 확대해서보기, 도움말
['view', ['codeview','fullscreen', 'help']]
],
// 추가한 글꼴
fontNames: ['Arial', 'Arial Black', 'Comic Sans MS', 'Courier New','맑은 고딕','궁서','굴림체','굴림','돋음체','바탕체'],
// 추가한 폰트사이즈
fontSizes: ['8','9','10','11','12','14','16','18','20','22','24','28','30','36','50','72']
});
});
</script>
아래는 공식페이지에 있는 적용 예시이다.
https://summernote.org/getting-started/#without-bootstrap-lite
Summernote - Super Simple WYSIWYG editor
Super Simple WYSIWYG Editor on Bootstrap Summernote is a JavaScript library that helps you create WYSIWYG editors online.
summernote.org
summernote가 적용되는 textarea의 값을 가져올 때는 아래와 같이 가져올 수 있다.
let description = $('#summernote').summernote('code');'code'를 사용하면 summernote에 작성된 글이나 이미지 등을 태그 그대로 가져올 수 있다.
아래는 내가 사용한 코드이다. 유튜브 영상 링크를 따로 추출하는 것이 필요했기 때문에 따로 분리하는 코드도 작성했다.
save : function () {
let description = $('#summernote').summernote('code');
let youtubeIframe = $(description).find('iframe[src*=youtube]');
let reference = null;
let broadcastId = $('#broadcastId').val();
let array = new Array();
if (youtubeIframe.length > 0) {
$.each(youtubeIframe, function (idx, value) {
let iframe = $(value);
reference = iframe.attr('src').replace('//www.youtube.com/embed/', 'https://www.youtube.com/watch?v=');
array.push(reference);
});
}
let data = {
memberId: $('#member_id').val(),
title: $('#meme').val(),
summary: $('#summary').val(),
broadcastId: broadcastId,
content: description,
reference: array
};
$.ajax({
type: 'POST',
url: '/api/v1/post',
dataType: 'json',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify(data)
}).done(function () {
window.location.href = '/meme/post/' + broadcastId;
}).fail(function (error) {
alert(JSON.stringify(error));
})
},이렇게 summernote('code')로 작성한 내용을 가져와서 원하는 대로 코드를 작성해 사용하면 된다.
summernote에 작성한 내용을 DB에 저장한 뒤 DB에서 다시 가져와 화면에 출력할 때 summernote가 적용된 곳에 출력할 때는 아래와 같이 식으로 하면 된다. (참고로 템플릿 엔진은 타임리프이다.)
<textarea id="summernote" name="description" th:text="${post.getDescription()}"></textarea>그런데 보통 글을 수정할 때는 에디터에 내용이 출력되게 하는데, 단순히 조회할 때는 에디터에 출력하진 않는다.
하지만 summernote가 적용되지 않은 영역에 위의 코드처럼 th:text를 사용하면 태그가 그대로 나오게 된다.
<p>마이 썸머 카라는 게임 중 나왔다.</p><p><br></p><p><iframe frameborder="0" src="//
www.youtube.com/embed/B41Akh...
" width="640" height="360" class="note-video-clip"></iframe><br></p>
DB에 위처럼 저장되어 있었다면 저렇게 태그 그대로를 포함해서 화면에 나온다. 태그 없이 출력하려면 th:text가 아니라 th:utext를 사용하면 된다.
<div class="mb-3" id="description" name="description" th:utext="${post.getDescription()}">
'SpringBoot > 개인프로젝트' 카테고리의 다른 글
| AWS EC2 https 적용 (1) | 2023.05.01 |
|---|---|
| AWS 설정 (0) | 2023.05.01 |
| 트위치 OAuth 로그인 (0) | 2023.05.01 |
| 트위치 API 스트림 정보 가져오기 (0) | 2023.05.01 |
| 트위치 API를 이용해 정보 가져오기 (0) | 2023.05.01 |
