[React]WYSIWYG toast-ui editor 사용하기

참고

- npm 

https://www.npmjs.com/package/@toast-ui/react-editor 

- api

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

 

1. 설치

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

yarn add @toast-ui/react-editor

 

2. 선언

import 'codemirror/lib/codemirror.css';

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

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

 

3.코드

 

import React, { Component } from "react";

import axios from "axios";

import "codemirror/lib/codemirror.css";

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

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

 

class Write2 extends Component {

  editorRef = React.createRef();

 

  constructor() {

    super();

    this.state = {

      content: "",

    };

  }

  handleClick = () => {

    this.setState({

      content: this.editorRef.current.getInstance().getHtml(),

    });

  };

 

  render() {

    return (

      <>

        <Editor

          previewStyle="vertical"

          height="300px"

          initialEditType="wysiwyg"

          placeholder="글쓰기"

          ref={this.editorRef}

        />

        <button onClick={this.handleClick}>저장</button>

      </>

    );

  }

}

 

export default Write2;

 

4. 실행화면