문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
====== SummerNote ======
<WRAP left notice 80%>
  * description : SummerNote 관련 내용 기술
  * author      : slaptear
  * email       : sgjang@repia.com
  * lastupdate  : 2023-03-02
</WRAP>
<WRAP clear/>

===== SummerNote란? =====
  * SummerNote는 심플한 무료 에디터로 아주 쉽게 누구나 사용가능하다.
  * 가장 큰 장점은 Callback함수를 지원하기 때문에 파일 업로드 구현이 매우 쉽다.

===== 적용 방법 =====
  * [[https://summernote.org/SummerNote 공식사이트|]]에 들어가서 다운로드한 후에 필요한 부분 추가
  * 아래와 같이 작성하게 되면 SummerNote 적용 완료
<code>
<head>
  <script src="../resources/summernote/summernote-lite.js"></script>
  <script src="../resources/summernote/lang/summernote-ko-KR.js"></script>
  <link rel="stylesheet" href="../resources/summernote/summernote-lite.css">
</head>
<body>
  <div class="container">
    <textarea class="summernote"></textarea>    
  </div>
  <script>
    $(document).ready(function() {

  	    var 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', ['codeview','fullscreen', 'help']]                          // 코드보기, 확대해서보기, 도움말
		    ];

	    var setting = 
                    {
                       height : 300
                       , minHeight : null
                       , maxHeight : null
                       , focus : true
                       , lang : 'ko-KR'
                       , toolbar : toolbar
                       , callbacks : {                                                         //여기 부분이 이미지를 첨부하는 부분
                            onImageUpload : function(files, editor, welEditable) {
                                              for (var i = files.length - 1; i >= 0; i--) {
                                                 uploadSummernoteImageFile(files[i],this);
            		                     }
            	                           }
                          }
                      };
  
              $('#summernote').summernote(setting);
          });
  </script>
</body>
</code>
===== Tip =====
  * SummerNote 값 Set, get (태그와 같이 가져옴)
<code>
//set
var markupStr = '<p>hello world</p>';
$('#summernote').summernote('code', markupStr);
//get
var markupStr = $('#summernote').summernote('code');
</code>

===== Ref =====
  * [[https://summernote.org/deep-dive/|SummerNote 공식 문서]]
  * [[https://minaminaworld.tistory.com/177|기본사용법]]
  * [[https://tyrannocoding.tistory.com/13|SummerNote 적용 방법]]
  * [[https://tyrannocoding.tistory.com/14|SummerNote Toolbar 수정]]
  * [[https://tyrannocoding.tistory.com/15|SummerNote 다중 이미지 업로드]]
  

{{tag>slaptear summernote}}
문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구
