#9_[spring boot] 게시판 등록 화면 summernote 웹 에디터 사용

안녕하세요.

이전에 스프링부트, gradle 환경을 맞추고

게시판 목록까지 출력하는 작업을 해왔습니다.

[개발/spring boot, gradle, mybatis Project] - #3_[spring boot] 프로젝트 처음 시작하기(jsp vieeResolver)

[개발/spring boot, gradle, mybatis Project] - #4_[spring boot] mybatis 연결하기(gradle)_MVC 구축

[개발/spring boot, gradle, mybatis Project] - #8_[spring boot] 게시판 목록 출력(페이징 처리, 부트스트랩)

이외에도 다른 작업들을 하였는데 제 포스팅을 참고하세요.

이제 게시판 등록 모듈을 만들려고합니다.

기본적인 textarea를 사용할 수도 있지만

너무 투박하기 때문에 웹 에디터를 사용할 예정입니다.

summernote 라는 웹에디터를 사용해보겠습니다.

우선 적용시킨 결과 화면 입니다.

summernote를 적용 시켜 보겠습니다.

적용시키는 방법은 간단합니다.

한가지 우려가 된다면 부트스트랩의 버전과 summernote의 버전이 맞지 않으면

화면이 깨지고 그러더라고요.

저는 summernote의 버전을 변경시켜 완성시켰습니다.

summernote홈페이지 입니다.

https://summernote.org/

적용시키는 방법은 간단히 설명되어있습니다.

제가 적용시킨 과정을 설명드리겠습니다.

컨트롤러 부분은 간단합니다.

@RequestMapping(value = "/board/**/boardAdd")
    public String boardAdd(HttpServletRequest req, ModelMap modelMap, @ModelAttribute("boardSearchVO") BoardSearchVO boardSearchVO) {
		String jspPath =req.getRequestURI();
		modelMap.put("boardSearchVO", boardSearchVO);
		return jspPath;
	}

jsp 헤더에 선언한 문장입니다.

<!--summernote :S --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
 
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.js"></script>
<!--summernote :E -->

그리고 jspbody 부분입니다.

전체 소스를 올리지 않는 이유는

파일 업로드 부분도 있고 다른 요소들이 많아 헷갈릴수 있기에

부분적인 소스만 올리겠습니다.

<div class="board_div">
		<h2 class="page-header">Write</h2>


 		<form class="form" id="boardSearchVO" name="boardSearchVO">
			<input type="hidden" id="pageIndex" name="pageIndex" value="${boardSearchVO.pageIndex}"/>
			<input type="hidden" id="pageSize" name="pageSize" value="${boardSearchVO.pageSize}"/>
			<input type="hidden" id="bbs_sno" name="bbs_sno" value="${boardSearchVO.bbs_sno}"/>
			<input type="hidden" id="usr_id" name="usr_id" value="${boardSearchVO.usr_id}"/>
			<input type="hidden" id="title" name="title" value="${boardSearchVO.title}"/>
        </form>

        <form class="form-horizontal"  id="boardForm" name="boardForm" method="post" enctype="multipart/form-data">
        	<input type="hidden" id="bbs_contents" name="bbs_contents" value=""/>
        	<input type="hidden" id="ntc_yn" name="ntc_yn" value="N"/>
        	<input type="hidden" id="atch_file_sno" name="atch_file_sno" value="0"/>
        	<input type="hidden" id="bbs_sno" name="bbs_sno" value="${boardSearchVO.bbs_sno}"/>
        	
		  <div class="form-group">
		    <label for="inputEmail3" class="col-sm-2 control-label">Title</label>
		    <div class="col-sm-10">
		      <input type="text" class="form-control" id="bbs_title" name="bbs_title" placeholder="Title">
		    </div>
		  </div>

		  <div class="form-group">
		   	<label for="inputPassword3" class="col-sm-2 control-label">contents</label>
		   	<div class="col-sm-10">
		   		<div id="summernote"></div>
		   	</div>
		  </div>
		  
		 <%--  <div class="form-group">
		    <label for="inputEmail3" class="col-sm-2 control-label">첨부파일</label>
		    <div class="col-sm-10">
		      <div id="fine-uploader"></div>
    			<!-- Fine Uploader -->
    			<jsp:include page="/resources/fileUpload/all.fine-uploader/lee/division_script.jsp" flush="true" />
		    </div>
		  </div> --%>


		</form>

        <div class="pull-right"><a href="#" class="btn btn-primary btn-success boardAddBtn"><span class="glyphicon glyphicon-pencil"></span> Write</a></div>
        
    </div>

일단 화면을 출력하기위해서는 boardSearchVO의 값들은 제거하셔도 됩니다.

이전 포스팅에서 boardSearchVO을 만들었기때문에 그대로 붙여놓은 것 입니다.

<div id="summernote"></div> 로 선언된 부분이 웹에디터를 출력하게 됩니다.

그러기 위해서는 스크립드단에서 창을 열어줘야 합니다.

$(document).ready(function(){
	
	 $('#summernote').summernote({
	        placeholder: 'Write contents',
	        height: 400,
	        minHeight: null,             // set minimum height of editor
	        maxHeight: null,             // set maximum height of editor
	      });
})

제 설명이 많이 부족할수도 있습니다.

summernote 자체를 적용시키는데는 

홈페이지에 더욱 자세히 나와있으니 참고하세요.

좋은 하루 보내세요.