ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 국산 위지윅 에디터 - summernote
    개발이란 늘 배우는 것/Good Items 2015.03.05 07:32

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

    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

    댓글 2

    • 프로필사진

      서버에 업로드 성공했습니다. 그런데
      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 신고
      • 프로필사진

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

        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 신고
Designed by Tistory.

티스토리 툴바