티스토리 뷰

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

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
댓글
  • 프로필사진 최진안 서버에 업로드 성공했습니다. 그런데
    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);
    }
    });
    }

    했는데. 서버에 이미지는 정상적으로 업로드가 됩니다.
    2015.05.18 18:06 신고
  • 프로필사진 Favicon of http://khan018.tistory.com 아자자잣차 검색을 하다가 저도 여기 블로그를 참조하게 되어서 뎃글을 남겨봅니다.

    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);
    });
    }
    });
    }

    결론은 이미지를 에디터에 추가하는 방식이 변경되어서 그렇습니다.
    2017.02.20 18:04 신고
댓글쓰기 폼