Bootstrap 기반의 WISIWYG Editor – Summernote

본 포스팅은 그린컴퓨터아카데미에서 진행되는 “NCS 기반의 소프트웨어 프로그래밍 관련 모든 교육”의 보조 학습 교재로 활용되기 위해서 작성되었습니다.
ITPAPER 멤버의 수업 교재 활용 이외에 이 포스팅에 대한 어떠한 방식의 2차 활용도 허용하지 않습니다.


NCS 분류 정보통신 > 응용SW엔지니어링 > 정보기술 > 정보기술개발 > 응용SW엔지니어링
능력단위 화면구현
학습모듈명 화면구현

 

WYSIWYG(위지윅) 에디터란?

위지윅 에디터란 “What you see is what you get”의 약자로 사용자가 보는대로 결과를 얻는다는 뜻을 줄인 말입니다. 즉, 문서 편집 과정에서 화면에 나타나는 모양 그대로 출력물이 나오는 에디터를 말합니다. 최근 대부분의 게시판에서 글을 작성하는 화면에는 이러한 위지윅 에디터가 적용되어 있습니다.

HTML 기반의 위지윅 에디터는 종류가 상당히 많이 있습니다. 오랫동안 개발되어온 CKEditor나 Naver에서 배포하던 SmartEditor 등이 있습니다.

 

Summernote 소개

Summernote는 Bootstrap기반으로 만들어진 위지윅에디터 입니다. 사용방법이 다른 에디터들에 비해서 매우 간단하기 때문에 적용이 매우 쉽다는 장점이 있습니다.

http://summernote.org/

 

페이지 기본 구조 준비하기

아래와 같이 Bootstrap 기반의 웹 페이지의 기본 구조를 준비합니다. <form>태그를 기반으로 한 구성에 <textarea>요소를 배치했습니다. <textarea>요소에는 summernote라는 클래스 속성을 부여했습니다.

 

Summernote 설치하기

Summernote 웹 사이트에서 “Getting started” 메뉴를 클릭하여 페이지를 이동한 후, Download 버튼을 통해서 썸머노트를 다운로드 받습니다.

 

다운로드 받은 파일의 압축을 해제하면 dist라는 폴더가 생성됩니다. 이 폴더에 포함된 요소들을 적절한 경로에 배치합니다. 여기서는 “/plugins/summernote” 폴더 하위로 이동시켰습니다.

 

Summernote 적용하기

Summernote를 사용하기 위해서는 다음의 CSS와 JS소스를 참조시킵니다.

 

다음의 Javascript 코드를 적용하여 “.summernote”라는 클래스를 갖는 모든 요소에 썸머노트가 적용됩니다.

 

브라우저를 통해서 결과를 확인합니다.

1 thought on “Bootstrap 기반의 WISIWYG Editor – Summernote

댓글 남기기