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