[라라벨]섬머노트(summernote) 웹에디터 적용하기 #1 iframe으로

라라벨로 게시판을 만들때 웹에디터를 적용해야 하는데 역시 가장 좋은건 섬머노트다. 왜? 제일 편하니까.

 

 

요런 모양이 되도록 만들어보자. 그런데 이런 모양을 만들려면 iframe을 사용해야 했다. 그냥은 안되더라.

 

우선 글쓰기 부분에 iframe을 적용한다.

<div class="form-group">

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

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

               </div>

          </div>

 

이렇게 해주고 summernote.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 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]);

                }

               

            }

        }

    });

});

</script>

 

그리고 route를 설정한다.

 

web.php

Route::get('/boards/summernote', [KboardController::class, 'summernote'])->name('boards.summernote');

 

컨트롤러에도 등록한다.

public function summernote()

    {

        return view('boards.summernote');

    }

 

이렇게 해주면 첨부한 이미지처럼 만들 수 있다.

 

다음엔 섬머노트를 이용해 에디터에 이미지를 첨부하는 걸 해보자.