http://summernote.org/

다운로드

 

섬머노트는 ctrl+c 로해서 이미지를 붙여 넣을 수 있다.

즉 Drop down 방식을 취하며 이러한  이미지의 파일은 DB에 직접 저장 시킨다.

그래서 CKEditor 처럼  외부 저장소에  저장하기 위해  개발자가 개발을 따로 하고  설정을 해 줄 필요가 없다.

 

오라클 & MYSQL  : Long 타입으로 설정하면 된다.

 

다운로드 링크

 

->dist 를 파일을 사용

<!-- 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/2.1.4/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.2/summernote.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.js"></script>

 

카피해서 붙여넣는다.

 

주의

만약 기존에 부트스트랩과 제이쿼리 버전이 틀리면 충돌이 일어 날 수 있다

 

 

textarea 에 임의 아이디를 넣고 서머노트를 호출한다.

<div class="form-group">
	<label for="exampleInputPassword1">Content</label>
	<textarea class="form-control" name="content" rows="3" id="content"></textarea>
<script type="text/javascript">
	$(document).ready(function() {
		//아이디가 content 에 서머노트를 적용 한다.
			  $('#content').summernote();
	});
						
</script>
						
</div>

 

스프링에서 서머노트를 인식할 수 있게 리소스를 설정한다.

		<!-- summernote 리소스 설정 -->
	<resources mapping="/summernote/**" location="/WEB-INF/views/summernote/" />
	

 

 

서머노트 크기를 조절 할 수있다.

<script type="text/javascript">
$(document).ready(function() {
	//아이디가 content 에 서머노트를 적용 한다.
  $('#content').summernote({
	height:600 , 
	minHeight: null,             // set minimum height of editor
    maxHeight: null,             // set maximum height of editor
    focus: true                  // set focus to editable area after initializing summe						  
  });
});
						
</script>

 

 

한글 설정 : 한글 설정 스크립트를 연결 하고 제이쿼리에 lang :"ko-KR" 을 코딩한다.

<div class="form-group">
	<label for="exampleInputPassword1">Content</label>
<textarea class="form-control" name="content" rows="3" id="content"></textarea>

			<!-- include summernote-ko-KR -->
			<script src="/summernote/lang/summernote-ko-KR.js"></script>
								
						<script type="text/javascript">
						$(document).ready(function() {
							//아이디가 content 에 서머노트를 적용 한다.
							  $('#content').summernote({
								  height:600  ,
								  lang: 'ko-KR' // default: 'en-US'
							  });
						});
			</script>
						
</div>