[라라벨]섬머노트(summernote) 웹에디터 적용하기 #3 수정하기

수정을 위한 링크를 view에 만든다.

@if($boards->email==auth()->user()->email)

            <a href="/boards/edit/{{ $boards->num }}" class="btn btn-default">수정</a>

 

라우터를 만든다.

Route::get('/boards/edit/{id}', [KboardController::class, 'edit'])->name('boards.edit');

 

콘트롤러를 만든다.

public function edit($num)

    {

        $boards = Kboard::findOrFail($num);

        $boards->attfiles = explode(",",$boards->attachfile);

        return view('boards.edit', compact('boards'));

    }

 

view를 만든다. view에 글쓰기할때처럼 summeredit를 iframe으로 추가한다.

<div class="form-group">

       <div class="col-md-8">

          <iframe id="summerframe" src="{{ route('boards.summernoteedit', $boards->num) }}" style="width:100%; height:650px; border:none" scrolling = "no"></iframe>

       </div>

      </div>

 

또 라우터를 만든다.

Route::get('/boards/summernoteedit/{id}', [KboardController::class, 'summernoteedit'])->name('boards.summernoteedit');

 

또 콘트롤러를 만든다.

public function summernoteedit($num)

    {

        $boards = Kboard::findOrFail($num);

        return view('boards.summernote', compact('boards'));

    }

 

이제 iframe에 있는 summnernote에 내용을 표시하도록 수정한다.

summernote.blade.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>

@if($boards)

    <div id="summernote">{!! $boards->content !!}</div>

@else

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

@endif

<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값이 없으면 오류가 난다. 그래서 콘트롤러를 조금 수정한다.

public function summernote()

    {

        $boards = array();

        return view('boards.summernote',compact('boards'));

    }

 

이렇게 글쓰기할때 호출하는 sunnernote.blade.php에 $boards값을 빈값으로 보내준다. 아니면 오류난다.