nhn / tui.editor

🍞📝 Markdown WYSIWYG Editor. GFM Standard + Chart & UML Extensible.
http://ui.toast.com/tui-editor
MIT License
16.91k stars 1.71k forks source link

에디터에서 사진 드래그 앤 드랍 막기. #3239

Open SeungHoon-Kang opened 2 months ago

SeungHoon-Kang commented 2 months ago

TUI.editor를 사용하고 있는데, 드래그 앤 드랍으로 이미지 삽입하는 방식을 막고싶습니다.

툴바에 있는 이미지 삽입 버튼을 통해서, 기기의 폴더 내에서 이미지를 넣을 수 있는데,

이 방법 말고, 이미지를 폴더에서 드래그 앤 드랍으로 넣는 방법을 막고싶습니다.

현재 addImageBlob 으로 이미지 업로드를 처리하고 있는데, 드래그 앤 드랍을 따로 막는 방법이 있는지 궁금하여 문의드립니다.

`return ( <div style={{ width: '100%', textAlign: 'left' }}> <Editor ref={editorRef} initialValue={props.content || ''} previewStyle="horizontal" height="600px" placeholder="글을 입력하세요." initialEditType="wysiwyg" useCommandShortcut={true} onChange={handleChange} style={{ width: '80%' }} toolbarItems={[ ['heading', 'bold', 'italic', 'strike'], ['quote', 'ul', 'ol'], ['image', 'link'], ]} hooks={{ addImageBlobHook: async (blob: any, callback: any) => { const reader = new FileReader();

        reader.onloadend = async () => {
          if (typeof reader.result === 'string') {
            const base64String = reader.result.split(',')[1];
            const formData = new FormData();

            formData.append('fileBase64', base64String);
            formData.append('fileName', blob.name);

            try {
              const res = await userApi.uploadImage(formData);

              if (res.data.rsltCd === '00') {
                const imageUrl = res.data.data.fileUrlS3;
                callback(imageUrl, 'image description');
              } else {
                toastMsg('이미지 업로드 실패', 'error');
              }
            } catch (error) {
              console.error('이미지 업로드 에러', error);
              toastMsg('이미지 업로드 중 오류가 발생했습니다.', 'error');
            }
          } else {
            console.error('Failed to load file as base64 string');
            toastMsg(
              '파일을 base64 문자열로 로드하는 데 실패했습니다.',
              'error',
            );
          }
        };
        reader.readAsDataURL(blob);
      },
    }}
  />
</div>

);`

위와 같이 코드를 사용하고 있습니다. 제가 놓친 부분이 있는건지 아니면, 드래그 앤 드랍 방식을 막는 방법은 따로 없는건지 알려주시면 정말 감사합니다.