Quill editor 내부의 사진 서버로 보내기

 

현재 구현한 react quill 내부에 사진을 넣은 후, 에디터 속 콘텐츠를 콘솔에 찍어보았다.

사진 하나를 넣었는데도 불구하고 너무 길어서 콘솔에 찍히지도 않고, 

사진이 들어있을 경우에는 서버로 전송도 되지 않았다.

 

현재 파일을 추가하면, base64형식을 이미지의 src로 받기 때문에 위의 사진과 같이 방대한 양의 콘솔이 찍힌 것을 알고 있었다.

따라서 base64가 아닌 url로 바꾸어 보는 과정을 가지기로 하였다.

 

문제점

현재 작성된 API는 포트폴리오를 전송하거나, 수정할 때

에디터에 들어갈 이미지들을 파일형태로 전송하는 방식이었다.

 

하지만, 에디터를 사용할 경우에는 포트폴리오 전송, 수정 전 이미지의 src에 넣어줄 url을 받아와야 하였다.

 

포트폴리오 전송, 수정 전에 이미지의 url을 받아와야하였기 때문에, 기존 API 방식을 수정할 필요가 있었으며,

이미지를 서버로 보낼경우 url을 받아오는 API 도 필요하였다.

 

기존의 방식에서 수정이 필요하였기 때문에, 서버쪽에 요청하기가 조심스러웠다.

따라서 기존의 방식과 새롭게 도입하려고 하는 방식을 정리하여서 서버쪽과 이야기를 나누었다. (아래 링크: 정리한 문서)

https://www.notion.so/silmul-docs/content-121c1162f06040d3a7f18f9fd9d83423?pvs=4

 

다행히 서버쪽에서 새롭게 요청한 방법으로 진행하자고 말씀하셨고,

이미지를 서버로 보낼경우 url을 받아오는 API를 만들어서 새롭게 진행하였다.

 

수정

 const quillRef = useRef<ReactQuill | null>(null);
  // 이미지 처리를 하는 핸들러
  const imageHandler = () => {
    if (!quillRef.current) return;
    // console.log(typeof quillRef.current.getEditor());
    const quillInstance: any = quillRef.current.getEditor();
    // 이미지를 저장할 input type=file DOM을 만든다.
    const input = document.createElement('input');
    // 속성 써주기
    input.setAttribute('type', 'file');
    input.setAttribute('accept', 'image/*');
    input.click(); // 에디터 이미지버튼을 클릭하면 이 input이 클릭된다.

    // input이 클릭되면 파일 선택창이 나타난다.
    input.onchange = async () => {
      const file = input.files![0];

      try {
        // 이미지 업로드
        const url = await PortfolioAPI.uploadImg(file);
        const range = quillInstance.getSelection(true);
        quillInstance.insertEmbed(range.index, 'image', url);
        quillInstance.setSelection(range.index + 1);
      } catch (error) {
        console.error(error);
      }
    };
  };

  const formats = [
    'align',
    'background',
    'blockquote',
    'bold',
    'code-block',
    'color',
    'float',
    'font',
    'header',
    'height',
    'image',
    'italic',
    'link',
    'script',
    'strike',
    'size',
    'underline',
    'width',
    'image',
  ];

  const modules = useMemo(() => {
    return {
      imageActions: {},
      imageFormats: {},
      syntax: {
        highlight: (text: any) => hljs.highlightAuto(text).value,
      },
      toolbar: writeMode
        ? {
            container: [
              ['bold', 'italic', 'underline', 'strike'], // toggled buttons
              ['blockquote', 'image', 'code-block'],

              [{ header: 1 }, { header: 2 }], // custom button values
              [{ list: 'ordered' }, { list: 'bullet' }],
              [{ script: 'sub' }, { script: 'super' }], // superscript/subscript
              [{ indent: '-1' }, { indent: '+1' }], // outdent/indent
              [{ direction: 'rtl' }], // text direction

              [{ size: ['small', false, 'large', 'huge'] }], // custom dropdown
              [{ header: [1, 2, 3, 4, 5, 6, false] }],

              [{ color: [] }, { background: [] }], // dropdown with defaults from theme
              [{ font: [] }],
              [{ align: [] }],

              ['clean'],
            ],

            // 내부 이미지를 url로 받아오는 handler
            handlers: {
              image: imageHandler,
            },
          }
        : false,
    };
  }, []);

 

위의 코드처럼 이미지 추가  버튼을 누를 경우 파일을 선택할 수 있도록 하였고,

이미지를 선택할 경우, 미리 정의한 PortfolioAPI.uploadImg로  파일을 서버로 보낸 뒤 S3에 저장, 

그 후 저장된 이미지의 url을 받아오도록 하였다.

 

이 후 Quill의 modules 내부에

imageHandeler 함수를 추가해주어 동작하도록 구현하였다.

 

 

결과

확인을 해보니, 이미지의 url이 잘 받아와지는 것을 확인하였고, 포트폴리오도 원하는 형태로 불러와지는 것을 볼 수 있었다.