Skip to content

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

Open
@SeungHoon-Kang

Description

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>

);`

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

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions