[라라벨]섬머노트(summernote) 웹에디터 적용하기 #2 이미지 첨부하기

섬머노트에서 이미지 첨부하는걸 여러번 했었는데 이번에 하려고 하는 라라벨에서의 이미지 첨부도 기존과 크게 다르지 않다. 다만 라라벨이다보니 콘트롤러를 이용해야한다던지 이미지 경로가 다르다던지 등등 이런 것들이 차이가 있다.

 

우선 이전에 만든 summernote.php 파일에 insert image 버튼을 눌렀을때 작동하는 스크립트를 넣어준다.

<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 id="summernote"></div>

<script>

$(document).ready(function() {

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

        codeviewFilter: false,

        codeviewIframeFilter: true,

        lang: 'ko-KR',

        height: 600,

        toolbar:[

            ['style', ['bold', 'italic', 'underline', 'clear']],

            ['font', ['strikethrough', 'superscript', 'subscript']],

            ['fontsize', ['fontsize']],

            ['color', ['color']],

            ['para', ['ul', 'ol', 'paragraph']],

            ['height', ['height']],

            ['insert', ['link', 'picture', 'video', 'file']],

            ['misc', ['codeview']]

        ],

        callbacks: {

            onImageUpload: function (files) {//이미지등록

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

                    saveFile($summernote, files[i]);

                }

               

            }

        }

    });

});

function saveFile($summernote, file){

     var formData = new FormData();

     formData.append("file", file);

     formData.append("uptype", "editor");

     $.ajax({

          url: '/boards/saveimage',

          data: formData,

          cache: false,

          contentType: false,

          processData: false,

          type: 'POST',

          success: function (data) {

               if(data.result==-1){

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

                    return;

               }else{

                    $('#summernote').summernote('insertImage', '/images/'+data.fn, function ($image) {

                        $image.css('max-width', '100%');

                        $image.css('padding', '10px');

                    });

                    var imgUrl=data.fn+","+parent.$("#imgUrl").val()//부모창의 id값을 호출

                    parent.$("#imgUrl").val(imgUrl);

               }

          }

     });

}

</script>

 

기존 소스와 비슷하다. '/boards/saveimgae'에 파일을 보내 저장을 하고 리턴값을 받아 에디터에 뿌려준다. imgUrl은 첨부된 이미지들을 따로 테이블에 저장하기 위해 사용한다.

 

콘트롤러에서 saveimage를 확인해보자.

public function saveimage(Request $request)

    {

        $request->validate([

            'file' => 'required|image|max:2048'

        ]);

        $image = $request->file('file');

        $new_name = rand().'_'.time().'.'.$image->getClientOriginalExtension();

        $image->move(public_path('images'), $new_name);

        return response()->json(array('msg'=> "succ", 'fn'=>$new_name), 200);

    }

 

이런식으로 처리해준다. 기존에 했던 방식과 크게 다르지 않다. 라라벨이라 조금 더 복잡할 뿐....

 

이렇게 이미지를 첨부후에 저장할때 어떻게 하는지 해보자. ajax로 처리한다.

function sendsubmit(){

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

          var content=$('#summerframe').get(0).contentWindow.$('#summernote').summernote('code');//iframe에 있는 summernote함수를 작동시킨다.

          var data = {

               subject : subject,

               content : content

          };

          $.ajax({

               headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},

               type: 'post',

               url: '{{ route('boards.create') }}',

               dataType: 'json',

               data: data,

               success: function(data) {

                    location.href='/boards/show/'+data.num;

               },

               error: function(data) {

                    console.log("error" +data);

               }

          });

     }

 

아주 간단하다. iframe에 있는 content값을 가져와서 저장하면 된다. 라라벨에서 ajax 처리하는 방식은 일반 php와는 조금 다르니 그 부분만 조심하면 된다.

 

저장하는 콘트롤러는 크게 다르지 않다.

public function create(Request $request)

    {

        $form_data = array(

            'subject' => $request->subject,

            'content' => $request->content,

            'name' => Auth::user()->nickName,

            'email' => Auth::user()->email,

            'isdisp' => 1

        );

        $rs=Kboard::create($form_data);

        return response()->json(array('msg'=> "succ", 'num'=>$rs->num), 200);

 

    }

 

일반적인 create 함수다.