에디터를 사용하고 있는데 모르겠어서 질문드려요

[Marina]

에디터를 찾다가 suneditor라는 것을 적용해서 사용하고 있어요.

메뉴얼도 찾아보고 이것저것 찾아봐도 하나도 이해가 안가서  도움을 앙망드려요 

다른 기능은 잘 동작하는데, 이미지를 업로드 하는 부분이 큰 문제입니다.

이미지를 s3에 업로드 해서 링크만 가져오려고 하는데, 지금 이미지파일 자체가 전부 jpeg:base64형태로 디비에 저장되고 있습니다.

onImageUploadBefore라는 옵션을 사용하면 된다고 하는데,, 뭘 어떻게 해야 할지 모르겠어서 부탁드립니다. 

아래는 지금 망한 코드입니다. 한번 훑어 봐주세요 . 그리고 힌트도좀 부탁드립니다. 

<에디터 컴포넌트>

'use client';

import React, { useRef, useState } from 'react';
import dynamic from 'next/dynamic';
import 'suneditor/dist/css/suneditor.min.css'; // Import Sun Editor's CSS File

const SunEditor = dynamic(() => import('suneditor-react'), {
  ssr: false,
});

const Editor = (props) => {
  const [value, setValue] = useState('');
  let [src, setSrc] = useState('');
  const editor = useRef();

  // The sunEditor parameter will be set to the core suneditor instance when this function is called
  const getSunEditorInstance = (sunEditor) => {
    editor.current = sunEditor;
  };

  function onImageUploadBefore(files, info, uploadHandler) {
    async () => {
      let file = files[0];
      let filename = encodeURIComponent(files.name);
      let res = await fetch('/api/post/image?file=' + filename);
      res = await res.json();

      //S3 업로드
      const formData = new FormData();
      Object.entries({ ...res.fields, file }).forEach(([key, value]) => {
        formData.append(key, value);
      });
      
      let uploadResult = await fetch(res.url, {
        method: 'POST',
        body: formData,
      });

      const response = {
        result: [
          {
            url: src,
            name: files[0].name,
            size: files[0].size,
          },
        ],
      };
      uploadHandler(response);
    };
  }

  return (
    <div>
      <SunEditor
        name="contents"
        placeholder="Please type here..."
        autoFocus={true}
        getSunEditorInstance={getSunEditorInstance}
        onImageUploadBefore={onImageUploadBefore()}
        defaultValue={props.defaultValue}
        height="500px"
        onChange={async (e) => {
          setValue(e);
        }}
        setAllPlugins={true}
        setDefaultStyle="font-family: 'Noto Sans KR', sans-serif;;color:black;font-size:12px;"
        setOptions={{
          imageGalleryUrl:
            'https://etyswjpn79.excute-api.ap-northease-1.amazonaws.com/suneditor-demo',

          buttonList: [
            [
              'bold',
              'underline',
              'italic',
              'strike',
              'list',
              'align',
              'fontSize',
              'formatBlock',
              'table',
              'image',
              'imageGallery',
              'video',
              'audio',
            ],
          ],
        }}
      />
    </div>
  );
};
export default Editor;

[codingapple]

suneditor 사용법을 찾아보는 수 밖에 없습니다 
뭔가 사용법이나 버전이 이상한게 아닐까요

[글쓴이]

글