💚react + spring boot + toast ui editor로 글 작성해보기-#3

작성일 | In

프론트 toastUI editor 적용 + 연동

editor적용해보고 연동도 해보자

toastUI editor 적용

React toastUI editor

1
npm install --save @toast-ui/react-editor

상세히 보기

image

  • 7번째 줄에 ref속성은 쉽게 말해서 <Editor >라는 DOM 객체를 가지고(`editorRef = createRef(); 여기서 editorRef가) 있는 것이다. 이 속성을 넣어준 이유는 이 객체로 editor 안에 내용을 가져와야 하기 때문에 넣어 주었고

  • 8번째 줄에 hook에서 addImageBlobHook은 tui editor에 있는 훅인데 이미지가 들어오면 작동하는 훅이다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
uploadImage = async (blob) => {
    const formData = new FormData();
    formData.append("file", blob);

    await fetch("http://localhost:8080/s3/upload", {
      method: "POST",
      body: formData,
      accept: "text/plain",
    })
      .then((response) => {
        return response.text();
      })
      .catch((err) => {
        console.log(err);
      });
  };

이미지 객체를 formData에 넣고 fetch로 백서버에 접근을 한다. 그다음 보낸 response를 text형식으로 반환하게 했다. => 여기서 return한 것을 callback()해주는데 여기서 문제가 있다. markdown에 링크가 입력이 되지 않는다. 분명 url은 잘 받아오는데 ㅠㅠ

  • 다음 저장 버튼을 누르면 onClick함수가 실행이 된다
1
2
3
4
5
6
7
8
9
10
11
onClick = () => {
    fetch("http://localhost:8080/submit", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        content: this.editorRef.current.getInstance().getMarkdown(),
      }),
    });
  };

여기도 마찬가지로 fetch로 json형태로 값을 보낸다. 8번째 줄에 content: this.editorRef.current.getInstance().getMarkdown() 이 부분이 핵심인데 아까 위에서 설명했던 것처럼 editor에 있는 내용을 markdown 형식으로 보내는 부분이다.

남은 부분

  1. 일단 이미지가 제대로 markdown에 삽입이 되게 수정을 하는 것
  2. Viewer 구현
  3. 이미지가 editor에 업로드 된후 그걸 삭제하면 s3에도 삭제 하게 하는 로직 구현