국산 위지윅 에디터 - summernote

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

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

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

<!-- 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>
 

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

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

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

이렇게 파일 추가 하고

 
$(document).ready(function() {
  $('#summernote').summernote({
    lang: 'ko-KR' // default: 'en-US'
  });
});
 

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

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

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

php server - saveimage.php

<?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;
 

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