Editorjs를 사용한 블록 에디터에 이미지 플러그인을 추가해보자 3 - 리엑트 컴포넌트 사용

Editor.js의 플러그인은 기본적으로 리엑트 컴포넌트를 사용할 수 없지만, react-dom의 render함수를 사용하며 리엑트 컴포넌트를 플러그인에서 사용할 수 있다.

 

이전 포스트에서 구현한 simple-image기능을 react 컴포넌트로 이전하여 구현해 본다.

 

  render() {
    // Editor.js에서 사용하는 기본 DOM 요소 생성
    const container = document.createElement("div");

    // React 컴포넌트를 해당 DOM 요소에 마운트
    ReactDOM.render(<Image />, container);

    return container;
  }

 

 

container를 구성하고 react dom의 API로 container에 리엑트 컴포넌트를 등록하여 사용한다.

 

 

Image 컴포넌트는 리엑트에서 input을 사용하여 이미지를 선택하는 기능을 구현한 것이다.

 

mport React, { useState } from "react";

const Image = () => {
  const [imageSrc, setImageSrc] = useState(""); // 이미지 경로 상태

  const handleImageChange = (event) => {
    const file = event.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onloadend = () => {
        setImageSrc(reader.result); // 이미지 미리보기 경로 설정
      };
      reader.readAsDataURL(file); // 파일을 Data URL 형식으로 읽기
    }
  };

  return (
    <div>
      {imageSrc ? (
        <img
          src={imageSrc}
          alt="Selected"
          style={{ width: "100%", maxHeight: "300px", objectFit: "contain" }}
        />
      ) : (
        <p>이미지를 선택하세요</p>
      )}
      <input
        type="file"
        accept="image/jpeg, image/png"
        onChange={handleImageChange}
      />
    </div>
  );
};

export default Image;