차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

--- wiki:editor:summernote [2023/03/02 12:27]
sgjang 만듦
+++ wiki:editor:summernote [2023/03/03 14:22] (현재)
sgjang
@@ 줄 7: / 줄 7: @@
 </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

사용자 도구

사이트 도구

차이

문서 도구