PHP 무료 웹에디터 섬머노트 Summer Note 사용하기 - 이미지 첨부하기 1편

개발을 하다보면 웹에디터를 찾아야할 때가 있다. 그런데 막상 찾아보면 쓸만한것이 별로 없다. 너무 복잡하거나 유료이거나 등등등의 이유로 꺼려진다. 

 

오랫동안 네이버 웹에디터를 사용하다가 최근에 섬머노트라는걸 알게돼서 이놈으로 바꿨다. 

 

summernote.org/

Summernote - Super Simple WYSIWYG editor

 

위 사이트에 가보면 된다. 기본적인 사용법은 사이트에 들어가서 10분만 보면 알 수 있다.

 

내가 써본 웹에디터들은 이미지를 글 안에 첨부하는것이 힘들었다. 섬머노트를 이용해서 글 안에 이미지를 넣는 방법을 알아보자.

 

우선 기본적인 에디터를 만든다.

 

write.php 파일을 만들자.

 

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">

  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

  <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

  <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">

  <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>

 

<div class="contact-area section_padding_80">

        <div class="container">

 

            <!-- Contact Form  -->

            <div class="contact-form-area">

                <div class="row">

 

                    <div class="col-12 col-md-12 item">

                        <div class="contact-form wow fadeInUpBig" data-wow-delay="0.6s">

                            <h2 class="contact-form-title mb-30">섬머노트 글쓰기</h2>

                            <!-- Contact Form -->

                            <form action="#" method="post">

                            <input type="hidden" name="imgUrl" id="imgUrl" value="">

                            <input type="hidden" name="attachFile" id="attachFile" value="">

                                <div class="form-group">

                                    <input type="text" class="form-control" id="subject" placeholder="제목">

                                </div>

                                <div class="form-group">

                                    <input type="text" class="form-control" id="childName" placeholder="이름">

                                </div>

                                <div class="form-group">

                                    <div id="summernote"></div>

                                </div>

                                <div class="form-group">

                                    <div id="attach_site">

                                        <div id="attachFiles">

                                        </div>

                                        <input type="file" multiple class="form-input" name="afile" id="afile" />

                                    </div>

                                </div>

                                <button type="button" class="btn contact-btn"  onclick="saveUp();">WRITE</button>

                            </form>

                        </div>

                    </div>

                </div>

            </div>

 

        </div>

    </div>

 

<script>

    $(document).ready(function () {

    var $summernote = $('#summernote').summernote({

        codeviewFilter: false,

        codeviewIframeFilter: true,

        lang: 'ko-KR',

        height: 600,

        callbacks: {

            onImageUpload: function (files) {

                for(var i=0; i < files.length; i++) {

                    if(i>20){

                        alert('20개까지만 등록할 수 있습니다.');

                        return;

                    }

                }

                for(var i=0; i < files.length; i++) {

                    if(i>20){

                        alert('20개까지만 등록할 수 있습니다.');

                        return;

                    }

                sendFile($summernote, files[i]);

              } 

                

            }

        }

    });

});

 

function sendFile($summernote, file) {

    var formData = new FormData();

    formData.append("file", file);

    $.ajax({

        url: '/board/saveImage.php',

        data: formData,

        cache: false,

        contentType: false,

        processData: false,

        type: 'POST',

        success: function (data) {

            if(data==-1){

                alert('용량이 너무크거나 이미지 파일이 아닙니다.');

                return;

            }else{

                $summernote.summernote('insertImage', data, function ($image) {

                    $image.attr('src', data);

                    $image.attr('class', 'childImg');

                });

                var imgUrl=$("#imgUrl").val();

                if(imgUrl){

                    imgUrl=imgUrl+",";

                }

                $("#imgUrl").val(imgUrl+data);

            }

        }

    });

 

}

 

 

위 코드를 이용해서 글쓰기용 화면을 하나 만들어보자...위 소스는 기본적인 소스다. 그래도 긁어가서 썼을때 잘 안될 수도 있으니 화면은 각자 알아서 꾸미면 된다.

 

아래처럼 나오면 기본은 된거라고 보면 된다.

 

 

이렇게 나온다면 훌륭하다. 물론 달라도 된다. 기본적인 글작성 폼과 맨아래 write 버튼만 있으면 OK다. 그리고 위 소스가 아니고 섬머노트에 있는 샘플 소스를 써도 된다. 어차피 나도 거기서 가져온거니..

 

우선 이렇게 해놓고 다음엔 소스에 대한 설명과 사용법을 알아보겠다.