1. 썸머노트 사용 방법

기존의 영화 평점 프로젝트에 커뮤니티 게시판을 추가하는 프로젝트를 진행하게 되었다. 일단 써보고 싶은 것이 썸머노트 였는데, 처음 사용할 때는 많이 헤맸다. 내가 쓴 걸 그대로 썸머노트에 나타나게 해야 했는데, 그것에 대한 이해가 부족한 탓에 자꾸 실패했다.

 

 

 

일단 썸머노트를 사용할 시, 헤드에 링크와 스크립트를 걸어준다.

 

 

 

자바스크립트에서 다음 과 같이 설정한다. 에이터의 높이, 한글 설정, placeholder 등등

 

 

 

게시물 업로드 html이다. 여기서는 textarea의 id에 썸머노트를 걸어준다.

 

 

 

 

뷰를 보면 썸머노트가 제대로 불러온 걸 확인할 수 있다.

 

 

 

 

게시물을 작성 후, 해당 게시물을 열람할 때는, 썸머노트가 비활성화 된 채로 뷰에 보여지게 된다. 마치 일반 textarea의 disabled 처럼 말이다. 게시물 html에서는 div에 썸머노트를 걸어주고, 자바스크립트로 가서 해당 썸머노트에 'code'로 내가 작성하였던 내용을 불러오고, destroy로 썸머노트를 비활성화 한다.

 

 

 

 

 

 

확인 결과 제대로 작성이 된 걸 확인하였다.

 

 

 

썸머노트 자주 사용하는 함수

// 서머노트에 text 쓰기
$('#summernote').summernote('insertText', 써머노트에 쓸 텍스트);

// 서머노트 쓰기 비활성화
$('#summernote').summernote('disable');

// 서머노트 쓰기 활성화
$('#summernote').summernote('enable');

// 서머노트 리셋
$('#summernote').summernote('reset');

// 마지막으로 한 행동 취소 ( 뒤로가기 )
$('#summernote').summernote('undo');

// 앞으로가기
$('#summernote').summernote('redo');