[에디터,위지윅에디터] Quill 에디터 적용 및 이미지 url 콜백 받기

1. Quill 에디터

  - Rich Text Editor 이면서 위지윅 에디터라고도 한다.

우리가 보통 인터넷에서 그림을 넣고, 글을 작성 하는 모든 에디터를 위지윅에디터라고 칭 할 수 있다.

오픈 소스 위지윅 에디터이며 modular 구조의 아키텍처이고, 적용하는 웹페이지에 대해서 완벽한 커스텀마이징이 가능하도록 구현 되 있다.

무엇보다 심플하면서 에디터가 가져야되는 최소한의 기능만 딱딱 구현되어 있어서 사용 하였다.

https://quilljs.com

Quill Rich Text Editor

Quill is a free, open source WYSIWYG editor built for the modern web. With its modular architecture and expressive API, it is completely customizable to fit any need.

2. 적용 환경

- 스프링부트, jquery의 환경에서 구현

3. 적용 방법

1. js, css Import

<!--quilljs editor-->
    <script src="//cdn.quilljs.com/1.3.6/quill.min.js"></script>
    <link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">

2. 에디터 공간 생성

<div id="quillEditor"></div>

3. 스크립트 내 선언

/**
 * Quilljs 에디터 테스트
 * */
function quilljsediterInit() {
    var options = {
        modules: {
            toolbar: [
                [{ header: [1, 2, false] }],
                ['bold', 'italic', 'underline'],
                ['image', 'code-block']
            ]
        },
        placeholder: 'Compose an epic...',
        theme: 'snow'
    };
    quill = new Quill('#quillEditor', options);
    quill.getModule('toolbar').addHandler('image', function() {
        selectLocalImage();
    });
}

/**
 * 퀼 이미지 콜백함수
 * */

function selectLocalImage() {
    const input = document.createElement('input');
    input.setAttribute('type', 'file');
    input.click();

    // Listen upload local image and save to server
    input.onchange = function() {
        const fd = new FormData();
        const file = $(this)[0].files[0];
        fd.append('image', file);

        $.ajax({
            type: 'post',
            enctype: 'multipart/form-data',
            url: '/upload/image/quilleditor',
            data: fd,
            processData: false,
            contentType: false,
            beforeSend: function(xhr) {
                xhr.setRequestHeader($("#_csrf_header").val(), $("#_csrf").val());
            },
            success: function(data) {
                const range = quill.getSelection();
                quill.insertEmbed(range.index, 'image', 'http://localhost:8080/upload/'+data);
            },
            error: function(err) {
                console.error("Error ::: "+err);
            }
        });
    };
}

콜백 함수는 image 라는 toolbar 내 모듈을 클릭시 selectLocalImage() 함수가 실행 되고, 함수 내에서는 type = file 인 input 을 생성, input에서 받은 값을 form-data 에 넣고 springboot 내 이미지 저장 controller를 타게 한다. controller에서는 서버에 이미지 저장 후 이미지 url를 return 하고, 

콜백 함수에서는 리턴 받은 url 값을 

quill의 insertEmbed() 메소드를 이용하여 에디터에 첨부 한다.