부트스트랩 무료 WYSIWYG Editor . 14.08.08

Super Simple WYSIWYG Editor on Bootstrap

- http://hackerwins.github.io/summernote/

현재 MIT LICENSE 로 무료로 사용 가능한 WYSIWYG Editor 입니다. ㅎㅎ

제가 이 에디터를 사용하게 된 것은 부트스트랩으로 간단한 사이트를 만들며 공부하고 있는데요

에디터를 tinymce가 가볍고 해서 사용하고 있었는데...문제는! 이미지를 링크 밖에 지원하지 않는 다는 점...

그래서 무료로 지원하는 에디터 중에 찾다가 Summernote 를 찾았습니다. ^ㅡ^

디자인은 이렇게 심플 하면서도 강력합니다.

간단하게 사용법을 살펴 볼까요~!! 먼저 위에 링크로 접속해서 파일을 다운로드 받습니다 ^^

summernote.js 와 summernote.css 를 프로젝트에 잘 첨부해 주세요.

사이트에 접속하시면 API 를 보실 수 있어요. 영문이지만 여러분들 열심히 공부하시라고 알려주지 않을 테...음..

네 접속해서 확인해보세요 (전 사실 친절하지않아요 ㅜㅜ...)

 
$('#summernote').summernote({
        onblur : function(e) {
            $('#summercontent').html($('#summernote').code());
        },
	height : 250, // set editor height
	minHeight : 100, // set minimum height of editor
	maxHeight : null, // set maximum height of editor
	lang : 'ko-KR' // default: 'en-US'
});

github 주소 또는 풀 소스가 있어요. 풀 소스로 받으시면 예제 파일이랑 language pack 이 있어요

language pack 중에서 summernote-ko-KR.js 을 찾아서 첨부하고, 위처럼 적용하면, 한글 에디터가 지원이 됩니다.

간단하게 에디터를 적용하는 것은 

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

$('#summernote').summernote();

이렇게 영역 잡고 아래처럼 스크립트 작성하면 적용은 끝 정말 쉽죠~?

API를 찾아보시면 알 수 있겠지면 여러가지 옵션이 있습니다.

위에 소스를 토대로 설명을 해드리자면, 저는 에디터의 내용을 폼에 전송해야 하기 때문에

옵션 중 onblur 를 적용하고 에디터의 내용을 textarea에 담도록 했습니다. ( onblur 는 Focus를 잃어버릴 때 발생하는 이벤트 입니다. )

이런식으로 이벤트를 잘 이용해서 데이터를 저장할 수 있어요 ^^

여러분들도 편하게 에디터 적용해서 사용하세요~!!