jquery 사용

순수 javascript

ㅁ 핫딜 모아모아의 개편 

 - 디자인 수정

     -> bootstrap 템플릿 적ㅇㅇ 

 - vue 에서 jsp 로 재 변경

 - 이와중에 스프링부트 jar로 패키징 시 jsp 파일을 인식 못하는 에러 발생 

 -  여러 방법을 써봤지만 어떤 방법에서도 webapp/WEB-INF/jsp 이 경로의 파일을 jar로 패키징 하지 못함

 - 결국 war로 패키징 시 정상 작동 확인 

ㅁ 추가 개편 사항

   ㅁ 회원 붙이고, 메일 알림 서비스 

   ㅁ 페이징 기능 추가 

   ㅁ 스케줄러 배치로 분리, 데이터 저장 기능 따로 분리 ( MSA 적용 )

<input type="checkbox" :id="'prdctFix_'+index" name="prdctfixyn" v-model="prdctFix.fixYn == 'Y' ? true : false" hidden>

위에거 안됌

:checked="prdctFix.fixYn == 'Y' ? true : false"

이걸로 써야돼 ㅁ

:disabled="devCtcsm.ctcsmScore == null "

var formData = new FormData();

formData.append('key1', 'value1');

formData.append('key2', 'value2');



for (var pair of formData.entries()) {
console.log(pair[0]+ ', ' + pair[1]);
}

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() 메소드를 이용하여 에디터에 첨부 한다.