Summernote 에디터 툴바 수정 - 삽질중인 개발자

- 썸머노트 에디터 툴바 기능 수정 - 

 

summernote의 기본 옵션으로 에디터를 사용하려고 하면

폰트의 사이즈도 변경하지 못하고 문자의 색도 변경하지 못해서 바로 사용하기에는 약간 불편함이 존재한다.

그래서 이 기본 에디터 옵션을 조정하여 사용을 해야 한다.

 

써머 노트의 기본 사용법은 아래의 여기를 참조하자.

 

 

 

우선 기본 옵션을 사용하여 에디터를 로딩하면 

 

기본 옵션

위와 같은 화면이 나오는데 이 모습에서 아래와 같은 모습으로 변경할 것이다.

 

폰트 설정 및 사이즈 설정이 가능하고 폰트의 색상을 조정 추가

 

여기 써머노트 툴바 변경 링크를 참조

$('.summernote').summernote({
		  toolbar: [
			    // [groupName, [list of button]]
			    ['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']
	  });

 

위와 같이 조정하면 조금 더 쓸만한 에디터가 된다.