summernote 활용하여 게시판 에디터 추가

https://summernote.org/

Summernote - Super Simple WYSIWYG editor

 

Import Relevant JQuery and Bootstrap version for summernote 

- JQuery 3.5.1, BootStrap 3.4.1을 사용하는 것으로 확인됨.

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>  <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">  <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>    <!-- include summernote css/js --> <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>

 

Script 부분, 여기서는 board_contents 부분에 내용이 기본적으로 나옴.

<textarea name="board_contents" id="board_contents" style="display:none;"></textarea> <script> $(document).ready(function() {     $('#board_contents').summernote({     }); }); </script>

 

에디터 선택자 내용은 summernote 안에 여러가지 속성을 지정하는 방식을 이용한다.

여기서는 에디터 기본 사이즈, 한글 지원 설정, 폰트 설정등을 진행함.

$('#board_contents').summernote({           height: 300,           width: 800,           minHeight: 370,           maxHeight: null,           focus: true,            lang: 'ko-KR',           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']     });

작동 예시:

TODO (문제점):

- SummerNote editor를 이용해 사진을 삽입, 그 사진을 정상적으로 에디터에 보여지도록 하기.. 

- Bootstrap version conflict (지원하는 버전을 써야함, 안그러면 충돌이 일어남.) - 

내가 연습용으로 사용하는 스킨 템플릿의 BootStrap 버전은 다른 것으로 알고 있음, 그에 따른 충돌 문제로 일부 디자인이 비정상적으로 표출되는 것을 확인함.

https://bootswatch.com/ 스킨 지원하는 듯 함.