react draft wysiwyg 이미지 업로드 후 한글입력시 나는 에러

Question

react-draft-wysiwyg 를 사용하고있습니다. 현재 위에처럼 입력시에 아무 문제가 없지만img를 업로드 후 한글을 입력하고 난 후에 한글을 입력 한 후에 띄어쓰기나 엔터를 입력하면 아래처럼 에러가 발생합니다.DraftEntity key: null,\찾아본 결과, 영문은 문제가 되지 않지만 한글 입력 후 띄어쓰기나 엔터를 입력하면 태그가 사라지면서 오류가 발생합니다.태그에

태그를 붙여주면 문제가 되지 않는다고 하는데요.혹시 이 문제를 해결하신 분이 계실까요? ㅜ코드입니다.'use client' import dynamic from 'next/dynamic' import { useState, useEffect, useRef } from 'react' import { ContentState, convertToRaw, EditorState } from 'draft-js' import { EditorProps } from 'react-draft-wysiwyg' import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css' import draftToHtml from 'draftjs-to-html' import { uploadImage } from '@/app/_api/img/ImgApi' import ResErrorMessage from '../../_data/ResErrorMessage' import ResUploadImage from '../../_data/img/ResUploadImage' import ResSuccessMessage from '../../_data/ResSuccessMessage' const Editor = dynamic(() => import('react-draft-wysiwyg').then(mod => mod.Editor), { ssr: false }) const htmlToDraft = typeof window === 'object' && require('html-to-draftjs').default interface EditorProp { value?: string name: string onChange: (e: any) => void } const InputEditor = ({ name, value, onChange }: EditorProp) => { const [editorState, setEditorState] = useState(EditorState.createEmpty()) const rendered = useRef(false) useEffect(() => { if (rendered.current) return rendered.current = true const blocksFromHtml = htmlToDraft(value || ' ') if (blocksFromHtml) { const { contentBlocks, entityMap } = blocksFromHtml const contentState = ContentState.createFromBlockArray(contentBlocks, entityMap) const editorState = EditorState.createWithContent(contentState) setEditorState(editorState) } }, [value]) useEffect(() => { if (!rendered.current) return onChange({ name: name, value: draftToHtml(convertToRaw(editorState.getCurrentContent())) }) }, [editorState]) // editor 수정 이벤트 const onEditorStateChange = (editorState: EditorState) => { setEditorState(editorState) } const uploadCallback = (file: Blob) => { return new Promise((resolve, reject) => { const reader = new FileReader() reader.onloadend = async () => { const formData = new FormData() formData.append('img', file) console.log('reader') await uploadImage('03', formData) .then(({ DATA, MESSAGE }: ResSuccessMessage) => { resolve({ data: { link: `/image/03/${DATA.refKey}.${DATA.exts}` } }) }) .catch(({ MESSAGE, status }: ResErrorMessage) => { alert(MESSAGE) // alert('지원하는 파일 확장자가 아닙니다.(.png, jpeg, jpg)') }) } reader.readAsDataURL(file) }) } // toolbar 설정 const toolbar = { options: ['inline', 'blockType', 'fontSize', 'fontFamily', 'list', 'textAlign', 'colorPicker', 'link', 'image', 'emoji'], inline: { options: ['bold', 'italic', 'underline', 'strikethrough'] }, fontSize: { options: [12, 14, 16, 18, 24, 30, 36, 48] }, list: { inDropdown: true }, // list 드롭다운 textAlign: { inDropdown: true }, // align 드롭다운 link: { inDropdown: true }, // link 드롭다운 history: { inDropdown: false }, // history 드롭다운 image: { uploadCallback: uploadCallback, previewImage: true }, // 이미지 커스텀 업로드 remove: false } // 언어 설정 const localization = { locale: 'ko' } return (

onChange({ name: name, value: draftToHtml(convertToRaw(editorState.getCurrentContent())) })} />

) } export default InputEditor

세브라이드 · Answer

컴포지션 관련 문제인 것 같은데 해당 키워드로 구글링 해보셔요.https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/isComposing

react draft wysiwyg 이미지 업로드 후 한글입력시 나는 에러

1개의 답변

Q&A 목록