[React] Weekly Dev: 9월 첫째 주

[React] Weekly Dev: 9월 첫째 주

1. 마크다운 에디터

모듈 설치

$ npm install @toast-ui/react-editor --save $ npm install @toast-ui/editor-plugin-chart @toast-ui/editor-plugin-code-syntax-highlight @toast-ui/editor-plugin-color-syntax @toast-ui/editor-plugin-table-merged-cell @toast-ui/editor-plugin-uml

import

import '@toast-ui/editor/dist/toastui-editor.css'; import { Editor } from '@toast-ui/react-editor'; import '@toast-ui/editor/dist/toastui-editor-viewer.css'; import { Viewer } from '@toast-ui/react-editor'; import chart from '@toast-ui/editor-plugin-chart'; import codeSyntaxHighlight from '@toast-ui/editor-plugin-code-syntax-highlight'; import 'tui-color-picker/dist/tui-color-picker.css'; import colorSyntax from '@toast-ui/editor-plugin-color-syntax'; import tableMergedCell from '@toast-ui/editor-plugin-table-merged-cell'; import uml from '@toast-ui/editor-plugin-uml';

에디터 사용

useRef로 레퍼런스를 걸어주고 Editor에서 현재 입력된 내용을 불러올 수 있다.

const editorInstance = 레퍼런스.current.getInstance(); const content = editorInstance.getMarkdown();

뷰어 사용

2. 게시판 에디터

모듈 설치

$ npm i ckeditor5

import

import { CKEditor } from '@ckeditor/ckeditor5-react'; import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

사용

const onContentChange = (event, editor) =>{ const data = editor.getData(); setContent(data); }

onContentChange(event, editor)} />

String html 렌더링하기

from http://chaennie.tistory.com/57 by ccl(A) rewrite - 2021-09-04 17:26:36