react에 ckeditor 적용하는데 어디를 수정 해야하는지 모르겠습니다

Question

기존 textarea 코드const TextArea = ({ setTitle, setContent, title, content }) => { return (

{ setTitle(e.target.value); }} className="title" placeholder="제목" value={title} />

{ setContent(e.target.value); }} className="text" placeholder="내용" value={content} /> </div> ); }; export default TextArea;ckeditor 적용후 코드const TextArea = ({ setTitle, setContent, title, content }) => { return ( <div className="textArea-wrapper"> <input onChange={(e) => { setTitle(e.target.value); }} className="title" placeholder="제목" value={title} /> <CKEditor editor={ ClassicEditor } data="<p>내용</p>" value={content} onReady={ editor => { // You can store the "editor" and use when it is needed. console.log( 'Editor is ready to use!', editor ); } } onChange={ ( event, editor ) => { const data = editor.getData(); console.log( { event, editor, data } ); } } onBlur={ ( event, editor ) => { console.log( 'Blur.', editor ); } } onFocus={ ( event, editor ) => { console.log( 'Focus.', editor ); } } /> </div> ); }; export default TextArea;textarea 불러오는 파일(글작성 페이지) <div className="addBoard-body"> <TextArea setTitle={setTitle} setContent={setContent} title={title} content={content}/> </div>현재 코드가 이렇게 되어 있습니다지금 1,2번째 코드에 있는 const TextArea = ({ setTitle, setContent, title, content }) 이부분을 통해첫번째 코드안에 있는 onChange={(e) => {setContent(e.target.value);}} 통해 setContent의 내용이 글 쓰는 페이지를 통해 데이터 베이스로 들어가는데 두번째 코드처럼 ckeditor를 쓰면 setContent를 쓸 수 없는 상황 입니다코드를 어떻게 수정해야 할까요?제가 설명을 잘 못해서 이상한 부분 있으면 다시 설명 하겠습니다

Hee Sung Son · Accepted Answer

onChange&#61;{ ( event, editor ) &#61;> { const data &#61; editor.getData(); setContent(data); console.log( { event, editor, data } ); } }이렇게하시면 연결됩니다

Hee Sung Son · Answer

똑같이 쓰는데 onReady함수에서 editor로 실행하면 된다고 공식문서에있네요https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/basic-api.html#setting-the-editor-data-with-setdataeditor.setData( '

Some text.

' );

react에 ckeditor 적용하는데 어디를 수정 해야하는지 모르겠습니다

2개의 답변

#ckeditor 목록