Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
SeungHoon-Kang opened this issue Apr 15, 2024 · 0 comments
Open

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

SeungHoon-Kang opened this issue Apr 15, 2024 · 0 comments
Labels

Comments

@SeungHoon-Kang
Copy link

SeungHoon-Kang commented Apr 15, 2024

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>

);`

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant