tinyMCE

현재 프로젝트에서 tinyMCE 에디터를 이용해서 이미지를 추가해주는 기능을 사용하고 있다.

        <Editor
          apiKey="velrv8dvpig61i0ewv03ljv8jsy1rwysgrwh814cutgpmd6k"
          value={text}
          onEditorChange={setText}
          init={{
            language: 'ko',
            height: 700,
            menubar: false,
            plugins: [
              'advlist autolink lists link image charmap print preview anchor',
              'searchreplace visualblocks code fullscreen',
              'insertdatetime media table paste code help wordcount'
            ],
            toolbar:
              'add_image | bold italic backcolor | alignleft aligncenter ' +
              'alignright alignjustify | bullist numlist outdent indent |',
            content_style:
              'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
            setup: (editor) => {
              editor.ui.registry.addButton('add_image', {
                text: '이미지추가',
                onAction: () => {
                  setIsModal(true);
                }
              });
            }
          }}
        />

onAction으로 해당 커스텀한 toolbar가 클릭 시 작동하는 함수를 넣어주면 된다.

바로 input file의 동작을 해서 바로 해당창을 띄우고싶었지만,

onAction에는 함수만 들어갈 수 있어서 어쩔 수 없이 Modal을 만들어서 해당 Modal창에 Input을 넣어주었다,

        <EditorModal isModal={isModal} setIsModal={setIsModal}>
          <ImageLabel htmlFor="modalImg">상품추가</ImageLabel>
          <ImageInput
            type="file"
            id="modalImg"
            multiple
            accept="image/*"
            onChange={addModalImg}
          />
        </EditorModal>

그래서 해당 상품추가 button을 눌렀을 때 위에 file창이 나오게 해주었다

굳이 저 Modal과정을 거치는게 싫어서 onAction에 바로 input file창을 나오게 해주고 싶었다,

tinyMCE 에디터라 해당 요소에 접근도 힘들어서 onAction에서 바로 input file 액션을 취해야할 필요가 있었다.

찾아보니 https://stackoverflow.com/questions/2048026/open-file-dialog-box-in-javascript 돔요소에 click 메서드가 존재하는걸 확인하였다.

그래서 useRef로 input요소 연결을 해서

	  	const inpEditor = useRef<HTMLInputElement>(null);

        <Editor
          apiKey="velrv8dvpig61i0ewv03ljv8jsy1rwysgrwh814cutgpmd6k"
          value={text}
          onEditorChange={setText}
          init={{
            language: 'ko',
            height: 700,
            menubar: false,
            plugins: [
              'advlist autolink lists link image charmap print preview anchor',
              'searchreplace visualblocks code fullscreen',
              'insertdatetime media table paste code help wordcount'
            ],
            toolbar:
              'add_image | bold italic backcolor | alignleft aligncenter ' +
              'alignright alignjustify | bullist numlist outdent indent |',
            content_style:
              'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
            setup: (editor) => {
              editor.ui.registry.addButton('add_image', {
                text: '이미지추가',
                onAction: () => {
                  if (inpEditor.current) {
                    inpEditor.current.click();
                  }
                }
              });
            }
          }}
        />

        <ImageInput
          type="file"
          multiple
          accept="image/*"
          onChange={addModalImg}
          ref={inpEditor}
        />
        

바로 input이 click되는 걸 가능하게 해주었다.