WYSIWYG Editor Summernote 도입

WYSIWYG Editor Summernote 도입

---

순서

1. Summernote 다운로드

2. 코드 집어넣기

3. submit 할 때 값을 넘길 수 있게 설정.

1. Summernote 다운로드

공식 홈페이지에서 다운로드

2. 코드 집어넣기

js/css 삽입

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

에디터를 넣고 싶은 곳에 삽입

<div id="summernote">Hello Summernote</div>

실행 스크립트 ( 페이지 로딩이 끝나면 )

$(document).ready(function() {
  $('#summernote').summernote();
});

3. submit 할 때 값을 넘길 수 있게 설정.

* 해당 내용은 form submit을 기준으로 작성.

ㄱ. 에디터를 삽입한 윗쪽에 보이지 않는 textarea를 넣고, name="content" 설정 했다.

<textarea name="content" style="display: none;"></textarea>
<div id="summernote" >Hello Summernote</div>

ㄴ. form에 인라인 자바스크립트로 submit 할 때, postForm을 실행하게 했다.

<form role="form" method="post" onsubmit="postForm()">

ㄷ. Summernote의 code를 가져와서 textarea 태그 중 name="content" 속성을 갖고 있는 요소를 찾아 값을 집어넣는다.

function postForm() {
    $('textarea[name="content"]').val($('#summernote').summernote('code'));
}