React 마크다운 에디터 구현하기

 

처음엔 Toast ui를 사용해서 에디터를 적용하려 했으나 버전이 자꾸 안맞는다고 튕겨서 

다른 라이브러리를 적용하게 되었음

프로젝트 문제인건지 뭐가 문제인건지 도저히 알수없음,,, 23년 10월이면 최근 아니냐고요 ㅠㅠ

 

머슨 이렇게 쉬운 라이브러리가 다 있는지

 

사용하기

 

1. 설치

npm i @uiw/react-md-editor

 

2. import

import MDEditor from '@uiw/react-md-editor';

3.editor사용하기

<MDEditor
  height={765}
  value={mailContent}
  onChange={handleEditorChange}
/>
 <textarea
  name="message"
  value={htmlContent}
  style={{ display: "none" }}
  />

*나는 이전에 작성한 메일보내기에 에디터를 사용해서 작성한 내용들이 들어가야 했는데 연결이 쉽지 않았다

그래서 그냥 textarea 추가해서 안보이게 해놓고 보냈음 

그랬더니 메일에는 <h1>안녕하세요</h1> 이런식으로 간다.. 

사용해주면!

 

이런식으로 잘 나온다.

viewer

뷰어 적용은

 <MDEditor.Markdown style={{ padding: 10 }} source={mailContent} />

이렇게 해주면 끝

 

잘 적용된다

이거 테스트한거 내용 캡쳐하려다

거,,,, 지원한 회사 메일로 받는 사람해놓은걸 깜빡하고 ㅎ

ㅎㅎ 이 난리 피워둔 메일을 회사로 보내버림

왜 지메일은 취소가안되나요,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,

스팸처리되었길 바랍니다....

 

에디터 라이브러리 사용법은 매우 간단하고 사용하기 쉬웠다

다음엔 꼭,, toast ui를 사용해야지