Editorjs를 사용한 블록 에디터에 이미지 플러그인을 추가해보자 2 - 이미지 선택 기능 추가

플러그인의 render함수에서 이미지 태그를 생성하고 리턴하면 해당 태그가 에디터에 보여지므로, image 태그에 이미지 선택 기능을 추가해본다.

 

 render() {
    const wrapper = document.createElement("div");
    const image = document.createElement("img");
    const fileInput = document.createElement("input");

    // 이미지 속성 설정
    image.style.maxWidth = "100%";
    image.style.maxHeight = "300px";
    image.alt = "선택한 이미지가 여기에 표시됩니다.";

    // 파일 입력 요소 설정
    fileInput.type = "file";
    fileInput.accept = "image/jpeg, image/png"; // JPEG와 PNG 형식만 허용
    fileInput.style.display = "none";

    // 파일 선택 이벤트 리스너
    fileInput.addEventListener("change", (event) => {
      const file = event.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = (e) => {
          image.src = e.target.result;
        };
        reader.readAsDataURL(file);
      }
    });

    // 이미지 클릭 시 파일 선택창 열기
    wrapper.addEventListener("click", () => fileInput.click());

    wrapper.appendChild(image);
    wrapper.appendChild(fileInput);

    return wrapper;
  }

 

기본적으로 input태그와 image태그를 포함할 wrapper 태그를 생성한 후, image 태그와 input 태그에 이미지 선택을 위한 적절한 설정을 추가한다.

 

image태그에는 선택한 이미지를 적절한 크기로 보일 수 있도록 max-width, max-height를 설정하고, 이미지를 선택하기 전에 alt 텍스트로 적절한 문구를 추가해준다.

   // 이미지 속성 설정
    image.style.maxWidth = "100%";
    image.style.maxHeight = "300px";
    image.alt = "선택한 이미지가 여기에 표시됩니다.";

 

input 태그에는 이미지를 선택할 수 있도록, 이미지 타입과 이벤트 리스너를 등록한다.

 

   // 파일 입력 요소 설정
    fileInput.type = "file";
    fileInput.accept = "image/jpeg, image/png"; // JPEG와 PNG 형식만 허용
    fileInput.style.display = "none";

    // 파일 선택 이벤트 리스너
    fileInput.addEventListener("change", (event) => {
      const file = event.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = (e) => {
          image.src = e.target.result;
        };
        reader.readAsDataURL(file);
      }
    });

    // 이미지 클릭 시 파일 선택창 열기
    wrapper.addEventListener("click", () => fileInput.click());

 

해당 코드를 추가하고 실행하면 다음과 같이 이미지를 선택하고 선택한 이미지를 에디터에 보일 수 있다.