$$config title: TOAST UI keywords: - IT - ... $$ # Install react와 TOAST UI의 버전 호환문제로 인해 --force 붙혀줘야함 npm install --force --save @toast-ui/react-editor # pakage-lock.json 에 다음 내용 추가 ~~~ "node_modules/expo/node_modules/@unimodules/react-native-adapter": { "version": "5.7.0", "resolved": "https://registry.npmjs.org/@unimodules/react-native-adapter/-/react-native-adapter-5.7.0.tgz", "integrity": "sha512-L557/+sc8ZKJVgo1734HF1QNCxrt/fpqdmdNgySJT+kErux/AJNfPq3flsK0fyJduVmniTutYIMyW48cFoPKDA==", "dependencies": { "invariant": "^2.2.4", "lodash": "^4.5.0" }, "peerDependencies": { "react-native": "*", "react-native-web": "~0.13.7" } }, "node_modules/expo/node_modules/inline-style-prefixer": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-5.1.2.tgz", "integrity": "sha512-PYUF+94gDfhy+LsQxM0g3d6Hge4l1pAqOSOiZuHWzMvQEGsbRQ/ck2WioLqrY2ZkHyPgVUXxn+hrkF7D6QUGbA==", "peer": true, "dependencies": { "css-in-js-utils": "^2.0.0" } }, "node_modules/expo/node_modules/react-native-web": { "version": "0.13.18", "resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.13.18.tgz", "integrity": "sha512-WR/0ECAmwLQ2+2cL2Ur+0/swXFAtcSM0URoADJmG6D4MnY+wGc91JO8LoOTlgY0USBOY+qG/beRrjFa+RAuOiA==", "peer": true, "dependencies": { "array-find-index": "^1.0.2", "create-react-class": "^15.6.2", "deep-assign": "^3.0.0", "fbjs": "^1.0.0", "hyphenate-style-name": "^1.0.3", "inline-style-prefixer": "^5.1.0", "normalize-css-color": "^1.0.2", "prop-types": "^15.6.0", "react-timer-mixin": "^0.13.4" }, "peerDependencies": { "react": ">=16.5.1", "react-dom": ">=16.5.1" } }, ... "dependencies": { "@unimodules/react-native-adapter": { "version": "5.7.0", "resolved": "https://registry.npmjs.org/@unimodules/react-native-adapter/-/react-native-adapter-5.7.0.tgz", "integrity": "sha512-L557/+sc8ZKJVgo1734HF1QNCxrt/fpqdmdNgySJT+kErux/AJNfPq3flsK0fyJduVmniTutYIMyW48cFoPKDA==", "requires": { "invariant": "^2.2.4", "lodash": "^4.5.0" } }, "inline-style-prefixer": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-5.1.2.tgz", "integrity": "sha512-PYUF+94gDfhy+LsQxM0g3d6Hge4l1pAqOSOiZuHWzMvQEGsbRQ/ck2WioLqrY2ZkHyPgVUXxn+hrkF7D6QUGbA==", "peer": true, "requires": { "css-in-js-utils": "^2.0.0" } }, "react-native-web": { "version": "0.13.18", "resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.13.18.tgz", "integrity": "sha512-WR/0ECAmwLQ2+2cL2Ur+0/swXFAtcSM0URoADJmG6D4MnY+wGc91JO8LoOTlgY0USBOY+qG/beRrjFa+RAuOiA==", "peer": true, "requires": { "array-find-index": "^1.0.2", "create-react-class": "^15.6.2", "deep-assign": "^3.0.0", "fbjs": "^1.0.0", "hyphenate-style-name": "^1.0.3", "inline-style-prefixer": "^5.1.0", "normalize-css-color": "^1.0.2", "prop-types": "^15.6.0", "react-timer-mixin": "^0.13.4" } } } }, ~~~ # 기본 예시 ## App,tsx ~~~tsx import "@toast-ui/editor/dist/toastui-editor.css"; import "@toast-ui/editor/dist/toastui-editor-viewer.css"; import "@toast-ui/editor/dist/theme/toastui-editor-dark.css"; // dark 모드를 위한 import import { Editor } from "@toast-ui/react-editor"; import { useEffect, useRef, useState } from "react"; interface ToastUIProps { // default value를 위한 interface initialValue?: string; } function App({ initialValue = "" }: ToastUIProps) { const [initialValueState, setInitialValueState] = useState(initialValue); const editorRef = useRef(null); const handleRegisterButton = () => { console.log(editorRef.current?.getInstance().getHTML()); console.log(editorRef.current?.getInstance().getMarkdown()); }; useEffect(() => { if (editorRef.current) { editorRef.current.getInstance().focus(); if (initialValue === "") { editorRef.current.getInstance().reset(); } else { editorRef.current.getInstance().setMarkdown(initialValue); setInitialValueState(initialValue); } } }, [initialValue]); const handleRegisterBtn = () => { console.log(editorRef.current?.getInstance().getMarkdown()); console.log(editorRef.current?.getInstance().getHTML()); }; return (

### Editor Toast

); } export default App; ~~~ ## index.tsx ~~~tsx import { StrictMode } from "react"; import ReactDOM from "react-dom/client"; import App from "./App"; const root = ReactDOM.createRoot( document.getElementById("root") as HTMLElement ); root.render( ); ~~~

게시글 상세