본문 바로가기

개발이란 늘 배우는 것/Good Items

국산 위지윅 에디터 - summernote

오늘은 국산 위지윅 에디터 하나를 소개하려고 한다.

summernote(summernote.org) 라는 이름의 위지윅 에디터는 부트스트랩(getbootstrap.com) 기반에서 돌아가는 심플하고 강력한 에디터이다.



한국의 개발자들이 모여 만든 아주 쓸만한 에디터라는 건 써보면 확실하게 알 수 있다.


1
2
3
4
5
6
7
8
9
10
<!-- include libries(jQuery, bootstrap, fontawesome) -->
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script> 
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet"> 
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js"></script> 
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
 
<!-- include summernote css/js-->
<link href="summernote.css" rel="stylesheet">
<script src="summernote.min.js"></script>
 
cs


기본적으로 이렇게 include 해주어야 한다.

그리고, 언어 파일도 있어서 첨부해주면 한글로 표시되어서 사용하기가 더 수월하다. languages


1
2
3
<!-- include summernote-ko-KR -->
<script src="lang/summernote-ko-KR.js"></script>
 
cs

이렇게 파일 추가 하고

1
2
3
4
5
6
7
 
$(document).ready(function() {
  $('#summernote').summernote({
    lang: 'ko-KR' // default: 'en-US'
  });
});
 
cs

이런 식으로 설정해주면 되고.


이미지 업로드 시 약간의 작업이 필요한데, 간단하게는 이렇게 사용하면 된다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
jQuery(document).ready(function() {
    jQuery('#summernote').summernote({
        height: "400px",
        lang: 'ko-KR',
        onImageUpload: function(files, editor, $editable) {
           sendFile(files[0],editor,$editable);
        }
    });
    function sendFile(file,editor,welEditable) {
    data = new FormData();
    data.append("file", file);
      $.ajax({
          url: "/saveimage.php",
          data: data,
          cache: false,
          contentType: false,
          processData: false,
          type: 'POST',
          success: function(data){
              alert(data);
            editor.insertImage(welEditable, data);
          },
          error: function(jqXHR, textStatus, errorThrown) {
             console.log(textStatus+" "+errorThrown);
          }
      });
   }
});
 
cs


php server - saveimage.php


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?php
// A list of permitted file extensions
 
$allowed = array('png''jpg''gif','zip');
 
if(isset($_FILES['file']) && $_FILES['file']['error'== 0){
    $extension = pathinfo($_FILES['file']['name'], PATHINFO_EXTENSION);
    if(!in_array(strtolower($extension), $allowed)){
        echo '{"status":"error"}';
        exit;
    }
 
    if(move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/'.$_FILES['file']['name'])){
        $tmp='/uploads/'.$_FILES['file']['name'];
        echo '/uploads/'.$_FILES['file']['name'];
        //echo '{"status":"success"}';
        exit;
    }
}
 
echo '{"status":"error"}';
exit;
 
cs


이런 식으로 사용하면 이미지까지 잘 업로드 되고 에디터에 뿌려진다.


'개발이란 늘 배우는 것 > Good Items' 카테고리의 다른 글

국산 위지윅 에디터 - summernote  (2) 2015.03.05
  • 최진안 2015.05.18 18:06 신고 댓글주소 수정/삭제 댓글쓰기

    서버에 업로드 성공했습니다. 그런데
    Uncaught TypeError: Cannot read property 'insertImage' of undefined
    위와 같은 에러가 뜨네오..

    function sendFile(file,editor,welEditable) {
    data = new FormData();
    data.append("file", file);

    $.ajax({
    url: "/board_saveimage.php",
    data: data,
    cache: false,
    contentType: false,
    processData: false,
    type: 'POST',
    success: function(url){
    alert(url);
    editor.insertImage(welEditable, url);
    }
    });
    }

    했는데. 서버에 이미지는 정상적으로 업로드가 됩니다.

    • 검색을 하다가 저도 여기 블로그를 참조하게 되어서 뎃글을 남겨봅니다.

      summernote 처음에 생성시에 callbacks 부분을 아래처럼 하고

      $('#summernote').summernote({
      height:...
      ....
      toolbar: [
      ....
      ['insert', ['picture']],
      ....
      ],
      callbacks: {
      onImageUpload: function(files) {
      sendFile(files, $(this));
      }
      }
      });


      sendFIle을 아래처럼 하면 여러개의 이미지 한번에 업로드 가능합니다.
      php소스는 멀티이미지 업로드하는 소스 검색하면 잘 나옵니다.

      function sendFile(files, editor) {
      data = new FormData();
      len = files.length;
      $.each(files, function(idx, val) {
      data.append("images[]", val);
      });
      $.ajax({
      url:....
      .....
      success: function(data) {
      ....
      // 서버에 업로드된 이미지 파일들의 url을 data를 통해 받는다.
      $.each(data.urls, function(idx, url) {
      editor.summernote('editor.insertImage', url);
      });
      }
      });
      }

      결론은 이미지를 에디터에 추가하는 방식이 변경되어서 그렇습니다.