본문 바로가기
PHP/PHP 유용한 내용

php summernote 에디터 설치

by 진격의 파파 2016. 7. 22.
반응형

 

오랜만에 프로그램에 대해서 포스팅 하네요.
시간이 여유가 있으니 이제 슬슬 포스팅을 다시 시작을 해볼까 합니다. ㅎㅎ;;

이번 포스팅 내용은 SUMMERNOTE  입니다.
반응형 웹에서 사용하는 에디터 입니다.
우리나라 개발자가 만들었다고 하니 왠지 더 정감이 갑니다.
그리고 굉장히 깔끔하게 잘 만들었다고 생각합니다.
요즘 반응형 웹이 대세인데 딱 맞는 에디터가 이렇게 존재하고 있다니 그것도 우리나라 개발자들이 모여서 만든 솔루션이니 정말 대단하다 생각합니다.
설치가 잘 안되어서 1~2일 고생했네요.
이 고생을 다른 누군가 또 반복하지 않게 하기위해 이렇게 내용을 씁니다.

설치 방법은 우선 SUMMERNOTE 홈페이지 http://summernote.org/ 에서 프로그램을 다운받으면 됩니다.

summernote-develop  이라는 압축 파일을 다운받은 후
스크립트 파일과 jquery 파일을 추가 해주면 되는데
  <script src="../js/jquery-1.11.3.min.js"></script>
  <!-- include summernote -->
  <link rel="stylesheet" href="../dist/summernote.css">
  <script type="text/javascript" src="../dist/summernote.js"></script>

위 처럼 링크만 걸어주면 끝!
그리고 그다음 해야 할일은 스크립트에 소스를 추가하면 됩니다.

  <script type="text/javascript">
   $(function() {
    $('.summernote').summernote({
     height: 200,
     lang : 'ko-KR',
    
 callbacks: {
      onImageUpload : function(files, editor, welEditable) {
       console.log('image upload:', files);
       sendFile(files[0], editor, welEditable);
      },
     }
    });
   function sendFile(file,editor,welEditable) {
   data = new FormData();
   data.append("file", file);
    $.ajax({
      
url: "saveimage.php", // image 저장 소스
      data: data,
      cache: false,
      contentType: false,
      processData: false,
      type: 'POST',
      success: function(data){
//       alert(data);
       var image = $('<img>').attr('src', '' + data); // 에디터에 img 태그로 저장을 하기 위함
       $('.summernote').summernote("insertNode", image[0]); // summernote 에디터에 img 태그를 보여줌
//       editor.insertImage(welEditable, data);
      },
      error: function(jqXHR, textStatus, errorThrown) {
        console.log(textStatus+" "+errorThrown);
      }
    });
   }
   $('form').on('submit', function (e) {
    e.preventDefault();
//     alert($('.summernote').summernote('code'));
//     alert($('.summernote').val());
   });
  });
</script>
저 위에 붉은색으로 표시한 부분 때문에 조금 애를 먹었네요. 원래 callback 을 안쓰고 작동을 한다고 해서 계속 수정을 했었는데 안되길래 구글링으로 조금 찾아보니 특정 버전에는 callback을 쓰라고 하더군요.

위 소스 보시면 url: "saveimage.php" 라는 분이 있습니다.
이미지를 첨부했을경우 특정 폴더에 이미지를 저장해야하죠.
그래서 이미지 첨부시 이미지 저장 폴더에 saveimage.php 파일이 실시간 저장을 하게 합니다.
이미지 저장 시 중복된 이름의 첨부를 방지하기 위해서 조금 소스를 수정한 파일입니다.

-- saveimage.php --
<?
if ($_FILES['file']['name']) {
 if (!$_FILES['file']['error']) {
  $name = md5(rand(100, 200));
  $ext = explode('.', $_FILES['file']['name']);
  $filename = $name . '.' . $ext[1];
  $destination = 'upload/' . $filename; //change this directory
  $location = $_FILES["file"]["tmp_name"];
  move_uploaded_file($location, $destination);
  echo '사용자의 이미지 저장위치 url' . $filename;//change this URL
 } else {
   echo $message = 'Ooops!  Your upload triggered the following error:  '.$_FILES['file']['error'];
 }
}

?>

위 처럼 작업을 하시면 됩니다.
혹시라도 저처럼 summernote 때문에 고생하는 분들이 없기를 바라면서
포스팅을 마칩니다.

반응형