Cute Happy Ghost
본문 바로가기
Project/Semi

3-2 에디터 API (summernote editor 를 사용한 에디터기능구현)

by JENN_tech7 2021. 1. 31.
728x90
SMALL

 

 

 

 

 

 


  • 글쓰는 부분은 note.jsp를 include를 하였다
<div class ='content'>
	<jsp:include page="note.jsp"/>
</div>	

 

 

 

 

 

  • note.jsp
    • summernote editor api를 사용하였다
    • 다른 api도 많았지만 간단하면서도 기능이 좋다고 생각되어 선택했다
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- include libraries(jQuery, bootstrap) -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script> 

<!-- include summernote css/js-->
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.8/summernote.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.8/summernote.js"></script>
</head>
<body>
<textarea name="noticeDoc" id="summernote" value=""></textarea>
<script>
$(document).ready(function() {
     $('#summernote').summernote({
             height: 300,                 // set editor height
             minHeight: null,             // set minimum height of editor
             maxHeight: null,             // set maximum height of editor
             focus: true                  // set focus to editable area after initializing summernote
     });
});

$(document).ready(function() {
	  $('#summernote').summernote();
	});
</script>
</body>
</html>
728x90
LIST

댓글