Tiny Editor + React 이미지 파일 핸들링

개인적으로 진행 중인 그룹 프로젝트에서 에디터를 쓰게 되었다.

그중 Tiny Editor이 가장 편해 보였다. 하지만 API 문서 읽는 게 너무 귀찮았다. 다 영어로 되어있어서 또 거부감이 들었다 ㅎㅎ;

나중에 혹여나 다시 사용할 일이 있을까 하여 블로그 글로 남겨둔다

나는 내 컴퓨터의 파일을 로드하고 싶었는데, 그냥 문서에 쓰인 대로 플러그인들만 복붙해서 올리니까 이미지 url을 가지고만 올리는 게 가능했다. 파일로는 어떻게 하나 싶어서 보니까 추가적인 설정이 필요했다.

👇아래 API문서 링크를 보고 해결했다👇

https://www.tiny.cloud/docs/configure/file-image-upload/#file_picker_callback

해결 방법:

<>
      <input
        id="my-file"
        type="file"
        name="my-file"
        style={{ display: "none" }}
      />
      <Editor
        value={value.detailDescription}
        apiKey="발급받은 api key"
        onEditorChange={(newValue, editor) => {
          setValue(newValue);
        }}
        init={{
          height: 500,
          plugins: [
            "advlist autolink lists link image charmap print preview anchor",
            "searchreplace visualblocks code fullscreen",
            "insertdatetime media table paste code help wordcount",
          ],
          toolbar:
            "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | image",
          automatic_uploads: true,
          file_browser_callback_types: "image",
          image_advtab: true,
          file_picker_callback: function (callback, value, meta) {
            if (meta.filetype === "image") {
              let input = document.getElementById(
                "my-file"
              ) as HTMLInputElement;
              if (!input) return;
              input.click();
              input.onchange = function () {
                let file = (input as any)?.files[0];
                let reader = new FileReader();
                reader.onload = function (e: ProgressEvent<FileReader>) {
                  console.log("name", (e.target as FileReader).result);
                  callback((e.target as FileReader).result, {
                    alt: file.name,
                  });
                };
                reader.readAsDataURL(file);
              };
            }
          },
        }}
      />
    </>

input을 style display:none으로 숨기고(인라인 스타일링은 나중에 따로 수정할 예정!! 지양해야한다)

file_picker_callback을 선언하면 작은 browse 버튼이 생긴다. 주로 link, image, media dialog에서 띄울 수 있다.

file_browser_callback_types: "image" 으로 설정했으니, 이미지 추가 툴박스에 해당 버튼이 생기게 된다

만약 사용자가 생성된 browse버튼을 누르면, TinyMCE는 자동으로 등록된 function을 실행시킨다.

실행하면서, 내가 숨겨둔 input type file을 여는 로직을 설정하면 된다.

이 콜백 함수는 3개의 parameter을 받는다 ⇒ callback, value, meta

• callback: 파일을 보유하는 순간 호출할 콜백. 첫 번째 인자로 필드에 대한 새 값을 받고 두 번째 인자로는 input의 다른 필드에 대한 메타 정보를 선택적으로 받을 수 있다.(나는 alt를 file.name으로 설정함)
• value: 현재 필드의 값?파일을말하는건가? 콘솔 찍어봐도 값이 안뜸
• meta: 지정된 대화상자(여기선 내가 열었던 이미지 툴팁박스)의 필드값을 포함한다. meta.filetype이 filed의 타입을 포함하고 있다는것을 기억하거라
  • ⇒ 이건 meta.filetype === 'image' 이때 썼다