[Front end] React QuillEditor image url & api callBack

 

import React, { useState, useMemo } from 'react';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';

import * as api from 'lib/api';

const QuillEditor = () => {

  /**
   * imageUrl 제어
   */
  function imageUrlHandler() {

    const range = this.quill.getSelection();
    const url = prompt('please copy paste the image url here.');

    if (url) {
      // 커서위치에 imageUrl 삽입
      this.quill.insertEmbed(range.index, 'image', url);
    }
  }

  /**
   * image 제어
   */
  function imageHandler() {

    // input file tag 생성
    const input = document.createElement('input');
    input.setAttribute('type', 'file');
    input.setAttribute('accept', '.png,.jpg,.jpeg');
    input.click();

    // input change
    input.onchange = (e) => {

      const files = e.target.files;
      const formData = new FormData();
      formData.append('files', files[0]);

      // file 등록
      const tempFile = api.file.postTempFileUpload(formData);
      tempFile.then(response => {

        // 커서위치 및 fileSrno 얻기
        const fileSrno = response.fileSrno;
        const range = this.quill.getSelection();

        this.quill.insertEmbed(range.index, 'image', 'http://localhost:8002/master/api/v1/upload/img/' + fileSrno);
      });
    }
  }

  const [value, setValue] = useState('');

  /**
   * QuillEditor 모듈 구성
   */
  const modules = useMemo(() => ({
    toolbar: {
      container: [
        [{ header: [1, 2, false] }],
        ['bold', 'italic', 'underline'],
        [{ list: 'ordered' }, { list: 'bullet' }],
        ['imageUrl', 'image', 'code-block']
      ],
      handlers: {
        imageUrl: imageUrlHandler,
        image: imageHandler
      }
    }
  }), [])

  console.log(value);

  return (
    <ReactQuill theme='snow' value={value} modules={modules} onChange={setValue} />
  );
}

export default QuillEditor;

React로 QuillEditor를 컴포넌트로 구성하여 image url과 api callback 형식이다.

 

image url 방식

에디터에 이미지 웹서버 url를 직접 넣어 이미지를 구성하는 방식이다. 위 소스 코드에서 imageUrlHandler함수를 참조하면 된다.

 

 

api callback 방식

에디터에서 직접 파일을 선택하여 Back end API를 통해 이미지를 구성할 때 사용하는 방식이다. 위 소스 코드에서 imageHandler 함수를 참조하면 된다.

QuillEditer가 기본적으로 이미지 파일을 선택하면 base64로 인코딩하여 에디터 이미지를 구성한다. 이 방식을 그대로 사용하여 에디터 내용 자체를 BLOB, CLOB으로 저장하면 기능상 문제는 없지만 추후 데이터에 대한 이슈가 발생한다. 이를 방지하고자. api callback을 통해 이미지를 구성하는 방식이다.

toolbar에서 이미지 아이콘 선택 시 imageHandler가 실행된다. 이 함수에서 input file tag를 생성하여, 파일이 선택이 되면 onChange 이벤트가 실행되어 formData를 구성하여 Back end 서버에 정의된 API를 통해 이미지를 저장하고 저장된 이미지 key값을 return 받아 Back end 서버 이미지 표출용으로 API(OutputStream)를 통해 이미지를 구성한다.