React에서 TOAST UI Editor(Web Editor 사용하기)

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."

 

패키지 설치

npm install --save @toast-ui/react-editor

 

 

기본 소스 : ES Modues 활용

 

import 'codemirror/lib/codemirror.css';

import '@toast-ui/editor/dist/toastui-editor.css';

import { Editor } from '@toast-ui/react-editor';

 

본문 삽입 소스

class PageView extends Component {

       editorRef = React.createRef();

 

 

 

<Editor

  initialValue="hello react editor world!"

  previewStyle="vertical"

  height="600px"

  initialEditType="markdown"

  useCommandShortcut={true}  

  ref={this.editorRef}

/>

 

 

- Html contents 입력하기

this.editorRef.current.getInstance ().setHtml(database_data, false);

 

- 입력한 데이터 가져오기

this.editorRef.current.getInstance ().getData();

 

 

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."

 

참조

developer.aliyun.com/mirror/npm/package/@toast-ui/react-editor

Package - @toast-ui/react-editor

nhn.github.io/tui.editor/latest/ToastUIEditor

https://nhn.github.io/tui.editor/latest/ToastUIEditor/