원래 CKEditor를 사용할 계획이었으나
파일 업로드가 부분 유료라는 사실을 알게되어
summer note을 사용하여 게시판 글쓰기 기능을 구현하기로 계획을 변경하였다 !
찾아보니 summer note는 부트 스트랩과 충돌한다는 단점이 있는데
간단한 기능만을 필요로 한다면 lite 버전을 사용하여 충돌을 막을 수 있다고 한다.
나는 게시글을 작성하는 간단한 정도로만 활용할 것이기 때문에
lite 버전을 사용하게 되었다.
🤗적용하기
적용 자체는 아주아주 간단하다!
하지만 나는 여러개의 에러가 발생했고 ㅎ 주의점을 같이 작성해보려고 한다.
1. 아래 URL에 접속 -> 빨간색 화살표 클릭 -> 파일 받고 압축 풀기
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
2. 폴더 하단에 css,js 파일과 lang 폴더 안의 KR.js 파일 sts로 옮기기
⭐나는 static의 정적파일을 관리하는 assets 폴더 안에 summernote라는 폴더를 만들어 넣어주었다.
3. summer note 코드에 적용하기
타임리프를 사용하지 않는다면 th를 지우고 파일 경로를 넣어주면 된다 !
(ex. <script src="/static/assets/summernote/summernote-lite.js"></script>)
주의 할 점이 있는데 처음에 <head>안에 설정 정보를 다 넣어줬는데 실행해보니 아무것도 적용이 되지 않았다.
그래서 이리저리 넣어본 결과 js와 css코드는 head에 넣고 번역을 위한 KR.js는 <body> 하단에 넣어주니 summer note가 적용이 되었다.
또, 코드를 보면 css 코드는 로컬이 아닌 CDN 파일이다.
처음에 로컬 파일로 실행을 했을 때 summer note의 아이콘이 모두 나오지 않는 문제가 발생했다!
그래서 찾아보니 css가 충돌하는 문제를 어렵지 않게 찾아볼 수 있었고 CDN 파일로 경로를 바꿔주었더니 잘 실행되었다.
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layout/layout}">
<head>
<title>write-community</title>
<!-- summer note를 위한 설정 -->
<script th:src="@{/assets/summernote/summernote-lite.js}"></script>
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css" rel="stylesheet">
</head>
<th:block layout:fragment="content">
<body>
<div class="container">
<textarea id="summernote" rows="5" name="explanation"></textarea>
</div>
<!-- summer note를 위한 설정 -->
<script th:src="@{/assets/summernote/summernote-ko-KR.js}"></script>
</body>
</html>$('#summernote').summernote({
height: 300,
minHeight: null,
maxHeight: null,
focus: true,
lang: "ko-KR",
callbacks: {
onImageUpload : function(files){
sendFile(files[0],this);
}
}
});
4. 적용 완료
'🌱 Spring' 카테고리의 다른 글
| Page<Entity> 👉 Page<DTO> 매핑하기(+mapstruct로 page 매핑시 에러) (0) | 2024.02.23 |
|---|---|
| [springboot]mapstruct로 entity와 dto 매핑하기 (0) | 2024.02.22 |
| [SpringBoot]JUnit5 + mokito를 이용한 MVC 테스트 (1) | 2023.10.16 |
| JUnit이란? (0) | 2023.10.12 |
| 스프링 빈(Spring Bean)이란? (0) | 2023.09.26 |
