728x90
네이버스마트에디터 시작하기
Spring Boot 프로젝트에 스마트에디터 시작하기
velog.io
[Spring] 스프링 SmartEditor2 연동하기
Spring에서 스마트에디터2를 연동하는 방법에 대해서 알아봅시다! 🔑 우선 위의 SmartEditor2 zip 파일을 다운 받아주세요! --> 압축 파일을 풀게 되면 위의 사진과 같이 파일들이 들어있습니다. 이 파
wooaoe.tistory.com
https://github.com/naver/smarteditor2/releases
Releases · naver/smarteditor2
Javascript WYSIWYG HTML editor. Contribute to naver/smarteditor2 development by creating an account on GitHub.
github.com
https://kdyspring.tistory.com/34
(게시판에서 동작되는 SQL Query문) 조회수 증가
조회수 증가 -> 누군가 게시물을 조회할때마다 조회수가 1씩 늘어나야하기 떄문에 update 쿼리문을 사용해서 조회한 게시물의 조회수 데이터가 저장되어있는 view_cnt컬럼의 값에 1이 추가되도록 해
kdyspring.tistory.com
1. 게시판 글 목록에서 게시판 글로 연결(중첩 해결)
<c:forEach var="db" items="${list}" varStatus="vs">
글번호: <c:out value="${db.boardNum}"/>
카테고리: <c:out value="${db.category}"/>
제목: <a href="<c:url value='/viewDBoardContent'/>/${db.boardNum}"><c:out value="${db.title}"/></a>
닉네임: <c:out value="${db.nickname}"/>
작성 날짜: <c:out value="${db.edittedDate}"/>
조회수: <c:out value="${db.viewCount}"/>
추천수: <c:out value="${db.recommendNum}"/><br>
</c:forEach>
<button id="list">글 목록</button>
<script type="text/javascript">
$(function(){
$("#list").on("click", function(){
window.location.href ="<c:url value='/viewDBoardList'/>";
})
})
</script>
중첩 문제
게시판에서 글로 들어가고 들어가면 계속해서 주소가 쌓인다.
2. 조회수 증가(작동 안됨)
3. 게시판 글쓰기 구현(smarteditor 사용)
여기 저기서 글쓰기 에디터 찾아보다가 smarteditor가 괜찮은 것 같아서 사용하게 되었다.
문제는 구글링을 해도 적용하는게 상당히 어려웠다는 점...
결국에는 사용 환경이 달라서 커스터마이징할 수 밖에 없었다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>게시판 글쓰기</title>
<!-- 네이버 스마트에디터 -->
<!-- <head> 안에 추가 -->
<script type="text/javascript" src="<c:url value='/resources/libs/smarteditor/js/service/HuskyEZCreator.js'/>" charset="utf-8"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<!-- 2.10.0 버전엔 js 파일 일부분이 없어 오류 발생 ! -->
<script>
function save(){
oEditors.getById["txtContent"].exec("UPDATE_CONTENTS_FIELD", []);
//스마트 에디터 값을 텍스트컨텐츠로 전달
var content = document.getElementById("smartEditor").value;
// 값을 불러올 땐 document.get으로 받아오기
$("#content").val( $("#txtContent").val());
return;
}
$(function(){
$("form").on("submit", function(){
save();
})
})
</script>
</head>
<body>
<form id="board" action="insertPost" method="post">
제목: <input type="text" name="title">
닉네임: <input type="text" name="nickname">
비밀번호: <input type="text" name="password">
카테고리: <input type="text" name="category"> <!-- 나중에 select로 변경 -->
<input type="hidden" id="content" name="content">
<textarea id="txtContent" rows="10" cols="100" style="width: 100%;"></textarea>
<!-- textarea 밑에 script 작성하기 -->
<input type="submit" value="제출">
</form>
<script id="smartEditor" type="text/javascript">
var oEditors = [];
nhn.husky.EZCreator.createInIFrame({
oAppRef: oEditors,
elPlaceHolder: "txtContent", //textarea ID 입력
sSkinURI: "/libs/smarteditor/SmartEditor2Skin.html", //martEditor2Skin.html 경로 입력
fCreator: "createSEditor2",
htParams : {
// 툴바 사용 여부 (true:사용/ false:사용하지 않음)
bUseToolbar : true,
// 입력창 크기 조절바 사용 여부 (true:사용/ false:사용하지 않음)
bUseVerticalResizer : true,
// 모드 탭(Editor | HTML | TEXT) 사용 여부 (true:사용/ false:사용하지 않음)
bUseModeChanger : true
}
});
</script>
</body>
</html>
@PostMapping("/insertPost")
public ModelAndView insertPost(DebugBoardDTO dto) {
// 현재 날짜와 시간을 dto에 입력
Date now = new Date();
dto.setPostDate(now);
int num = serv.insertPost(dto);
System.out.println(num);
List<DebugBoardDTO> list = serv.viewDBoardList();
ModelAndView mav = new ModelAndView();
mav.addObject("list", list);
mav.setViewName("member/Test/viewDBoardList");
return mav;
}
@GetMapping("/newPost")
public ModelAndView newPost() {
ModelAndView mav = new ModelAndView();
mav.setViewName("member/Test/newPost");
return mav;
}
오늘 원래 오후 목표가
글 쓰기 / 수정하기 / 삭제하기였는데
아무래도 내일로 미뤄야겠다. 개피곤...
내일
글 수정하기
글 삭제하기
추천 증감 구현
카테고리 selection
시간이 남으면 부트스트랩을 이용한 글 목록 페이지네이션
그 이후에는
게시판 + 세부 보기 꾸미기
세부 보기에서 이전글 / 다음글 보이기
게시판이랑 글목록 위에 헤드라인
글 쓸 때, 로그인 상태일 때 닉네임 | default 닉네임 | 입력된 닉네임 구현
등등이 구현될 것이다.
'팀프로젝트 > SpringBoot' 카테고리의 다른 글
| 스프링부트 팀플) 20240318_ckEditor로 전환 + 일부 수정 (0) | 2024.03.18 |
|---|---|
| 스프링 부트 팀플) 20240317_게시판 글 수정 / 글 삭제 / 추천 증감 / 카테고리 include (0) | 2024.03.17 |
| 스프링 부트 팀플) 20240316 게시판 만들기_기본 토대 구축 (0) | 2024.03.16 |
| 스프링 부트 팀플) 20240313~20240315_새로고침, 뒤로가기 방지 (0) | 2024.03.15 |
| 스프링 부트 팀플) 20240314_로그인 화면 쿠키 (0) | 2024.03.14 |