2023. 2. 27. 19:35ㆍ자바/북애 프로젝트
북애 프로젝트에 summernote API 를 적용 완료한 후 내가 적용한 방법을 기록하기 위해 작성한다.
참고로 나는 Spring을 사용중이고 boot는 아니다.
1. summernote 다운로드
https://summernote.org/getting-started/
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. 프로젝트에 summernote 파일 갖다놓기
압축 푼 summernote 폴더에서
summernote-lite.css
summernote-ko-KR.js
summernote-lite.js
를 찾아서 프로젝트의 resources 파일에 알맞게 갖다놓기
(난
${contextPath }/resources/css/summernote-lite.css
${contextPath }/resources/js/summernote-lite.js
${contextPath }/resources/js/lang/summernote-ko-KR.js
이 경로로 넣어줬다.)
3. 게시글 작성 jsp에 summernote 설정해주기
<writeCommunity.js> << writeCommunity.jsp에 적용할 js 파일
$(document).ready(function() {
$('#summernote').summernote({
height: 700, // 에디터 높이
minHeight: null, // 최소 높이
maxHeight: null, // 최대 높이
focus: true, // 에디터 로딩후 포커스를 맞출지 여부
lang: "ko-KR", // 한글 설정
placeholder: '' //placeholder 설정
});
});물론 writeCommunity.jsp 에 script 태그로 넣어줘도 된다.
<writeCommunity.jsp의 <head> 태그안에 파일 넣어주기>
<head>
... //기타 정보
<script src="${contextPath }/resources/js/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="${contextPath }/resources/css/summernote-lite.css">
<script src="${contextPath }/resources/js/summernote-lite.js"></script>
<script src="${contextPath }/resources/js/lang/summernote-ko-KR.js"></script>
<script src="${contextPath }/resources/js/writeCommunity.js"></script>
<title>북애 - 글 작성 폼</title>
</head>jQuery가 필요하다.
<writeCommunity.js의 form 부분>
<form action="${contextPath }/community/addArticle.do" method="post"
id="writeArticleForm" name="writeArticleForm">
<div class="articleNameBox">
<input id="board_title" type="text" name="board_title" placeholder="제목">
</div>
<textarea id="summernote" name="board_content"></textarea>
<input id="submitBtn" type="button" value="완료" onclick="before_submit(this.form)"/>
</form>이 부분은 summernote 홈페이지에서도 쉽게 확인가능하다.
<textarea id="summernote"></textarea> 로 작성하면 된다!
summernote를 사용하면 파일도 summernote가 알아서 저장하고 불러와주기 때문에 내가 설정할 필요는 없다.
여기까지 작성하면 summernote가 페이지에 잘 적용되어 보일 것이다.
서버로 데이터를 보내는 부분은 다른 작업과 동일하다. name의 이름으로 받으면 된다. 나는 VO로 받고 sql문을 실행해줬다.
4. jsp에 데이터를 불러오는 작업
게시글을 불러오는 jsp에도 필요한 파일들을 import해준다.
<viewArticle.jsp>
<head>
... //기타 정보
<script src="${contextPath }/resources/js/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="${contextPath }/resources/css/summernote-lite.css">
<script src="${contextPath }/resources/js/summernote-lite.js"></script>
<script src="${contextPath }/resources/js/lang/summernote-ko-KR.js"></script>
<title>북애 - 글 읽기 폼</title>
</head>head 태그 안에 들어가는 내용
<table align="center">
<tr>
<td>제목</td>
<td><input type="text" value="${board.board_title}" disabled name="title" id="id_title"></td>
</tr>
<tr>
<td>내용</td>
<td>
<span name="content" id="content" disabled>${board.board_content}</span>
</td>
</tr>
</table>body안에 들어가는 내용.
참고로 처음에는 span이 아니라 div에도 담아보고 했는데 span에 담아야 태그 없이 사진까지 잘 불러와진다. span에 담지않으면 <p>안녕하세요.</p> <<이런식으로 불러와진다. span만 가능한건지는 모르겠다... 공식홈페이지에서 내용을 찾지 못했다. 내가 못본거겠지만...! ㅜㅜ
이렇게만 해주면 완성~
내용은 정말 글쓰는 것처럼... 해봤다.. (오글오글)
'자바 > 북애 프로젝트' 카테고리의 다른 글
| [개인 프로젝트 / 북愛] 14. onclick function의 매개변수로 el 넣을때 (0) | 2023.03.16 |
|---|---|
| [개인 프로젝트 / 북愛] 13. input value "(쌍따옴표) 문제, input value가 가끔 제대로 안나올 때 (1) | 2023.03.15 |
| [개인 프로젝트 / 북愛] 11. $(...).summernote is not a function 에러가 났을 때 (0) | 2023.02.27 |
| [개인 프로젝트 / 북愛] 10. 게시글 작성 완료 후, 데이터가 서버로 넘겨지지않을 때 (0) | 2023.02.27 |
| [개인 프로젝트 / 북愛] 9. sql문에서 받아오는 값이 null일 때가 있다면 (0) | 2023.02.15 |