2022. 3. 27. 08:49ㆍProject : 근의 공식(Muscle Formula)
참고자료 :
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}
</>
);
}결과물
'Project : 근의 공식(Muscle Formula)' 카테고리의 다른 글
| 2022/04/03 수정된 API 문서 (0) | 2022.04.03 |
|---|---|
| 2022/04/02 React Slick 슬라이더 (2) | 2022.04.02 |
| 2022/03/26 하위 컴포넌트에 id 부여하기 (1) | 2022.03.26 |
| 2022/03/26 리액트 onClick 이벤트 핸들러에 함수를 작동시킬 때 유의점 (1) | 2022.03.26 |
| 2022/03/25 초를 시간형식으로 바꾸는 함수 (1) | 2022.03.26 |