[jquery] summernote 썸머노트 사용예제

1. 개요

• 자바스크립트 jquery 라이브러리 웹에디터 썸머노트에 대한 사용법을 포스팅해보자.
• https://summernote.org/

Summernote - Super Simple WYSIWYG editor

jquery logo

 

 

2. jQuery Summernote

• jQuery Summernote는 인기 있는 jQuery용 WYSIWYG(What You See Is What You Get) 텍스트 편집기 플러그인
• 서식 지정, 이미지 및 비디오 삽입, 표 만들기 등과 같은 기능을 사용하여 사용자가 웹 브라우저에서 텍스트 콘텐츠를 쉽게 만들고 편집할 수 있습니다.
• 전반적으로 jQuery Summernote는 웹 애플리케이션에서 텍스트 콘텐츠를 만들고 관리하기 위한 강력하고 유연한 도구입니다.

 

3. 사용예제

• 아마 프로젝트를 하다보면 여러가지 화면에서 에디터를 사용해야할것이다.
• 공통으로 사용할수 있도록 선언하였고 간단하게 불러오기해서 사용할수 있다.

//별도함수로 선언

function fn_summernote(element){
	$("#" + element).summernote({
		toolbar: [
		    ['fontname', ['fontname']],
		    ['fontsize', ['fontsize']],
		    ['style', ['bold', 'italic', 'underline','strikethrough', 'clear']],
		    ['color', ['forecolor','color']],
		    ['table', ['table']],
		    ['para', ['ul', 'ol', 'paragraph']],
		    ['height', ['height']],
		    ['insert',['picture','link','video']],
		    ['view', ['fullscreen', 'help']]
		  ],
		fontNames  : ['Arial', 'Arial Black', 'Comic Sans MS', 'Courier New','맑은 고딕','궁서','굴림체','굴림','돋움체','바탕체'],
		fontSizes  : ['8','9','10','11','12','14','16','18','20','22','24','28','30','36','50','72'],
		width      : 1000,
		height     : 500,
	  	minHeight  : null,
		maxHeight  : null,
		focus      : false,
	    lang       : "ko-KR",
	    placeholder: '내용을 작성하십시오.'
	});
}

// 페이지 로딩시 호출
$(document).ready(function () {
    fn_summernote("noticeBoard");
});

// html
<textarea name="noticeBoard" id="noticeBoard" rows="3" cols="50">

 

 

4. script & style include 정보

• 아래와 같이 사용

//script
<script type="text/javascript" "/summernote/summernote-bs4.min.js"></script>
<script type="text/javascript" "/summernote/lang/summernote-ko-KR.min.js"></script>

//css
<link rel="stylesheet" href="/plugins/summernote/summernote-bs4.min.css">

//font
summernote.ttf 관련 폰트적용 해야함

 

 

5.완성화면

• 아래와 같이 사용할수 있다.

summernote example