2022/03/27 리액트 TS에서 Div 태그로 에디터 만들기

괴발새발자 2022. 3. 27. 08:49

참고자료 :

https://dev-bak.tistory.com/16

[HTML/JS/CSS] contenteditable을 이용한 editor 만들기

안녕하세요. 이번 포스팅은 HTML에 있는 contenteditable을 이용해서 editor를 만들기입니다. 만드는 방법은 아주 간단합니다. input, textarea와 같은 텍스트 입력 태그가 아닌 div와 같은 태그에 contenteditabl

dev-bak.tistory.com

https://thewebdev.info/2021/09/19/how-to-listen-for-changes-in-a-contenteditable-element-in-react/

How to Listen for Changes in a contentEditable Element in React? - The Web Dev

Spread the love Related Posts How to Listen for Changes to HTML Elements with the contenteditable Attribute with JavaScript?Elements with the contenteditable attribute added to it lets users edit the content inside the… Listen for Prop Changes in a Vue C

thewebdev.info

위 자료들을 참고해서 React TS에서 작동하는 에디터 박스를 만들 수 있다.

export default function BoxTest (){
  const [content, setContent] = useState<string|null>('');


  return (
    <>
      <div id="editor" contentEditable="true" onInput={(e)=> setContent(e.currentTarget.textContent)}>
      </div>
      {content}
    </>
  );
}

결과물