프로젝트에서 질문, 답변을 마크다운으로 작성할 수 있게 구현하고 싶어서 여러 라이브러리를 찾아보던 중 에디터/뷰어를 간단하게 다룰 수 있는 Toast UI Editor를 선택하게 되었다.
npm i --save @toast-ui/react-editor
설치 후 아래 구문으로 import 해온다.
import '@toast-ui/editor/dist/toastui-editor.css';
import { Editor } from '@toast-ui/react-editor';
그럼 아래와 같은 에러가 발생한다(!)
WARNING in ./node_modules/@toast-ui/editor/dist/toastui-editor-viewer.js Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
구글링을 통해 알게 된 해결 방법
https://github.com/nhn/tui.editor/issues/2137
package.json에서 아래와 같은 소스맵 설정을 추가해준다.
"scripts": {
"start": "GENERATE_SOURCEMAP=false react-scripts start"
}
깃허브
https://github.com/nhn/tui.editor/tree/master/apps/react-editor
공식문서
https://nhn.github.io/tui.editor/latest/ToastUIEditorCore
위 링크에서 다양한 옵션을 확인할 수 있다.
툴바에 넣을 기능도 선택할 수 있어서 나는 이미지 선택 옵션은 제외했다.
//깃허브에 나와있는 예제
import '@toast-ui/editor/dist/toastui-editor.css';
import { Editor } from '@toast-ui/react-editor';
const MyComponent = () => (
<Editor
initialValue="hello react editor world!"
previewStyle="vertical"
height="600px"
initialEditType="markdown"
useCommandShortcut={true}
/>
);
placeHolder, initialValue는 Editor의 기본 attribute로 있으니, 글 수정과 같은 때에만 이 방법을 사용하면 된다.
나의 경우는 Editor 컴포넌트가 따로 있고, 글 수정 페이지 컴포넌트(부모 컴포넌트)가 따로 있어서 ref를 props로 내려주어야 했다.
(글 수정, 글 작성, 답변 수정, 답변 작성 등 여러 페이지에서 Editor를 사용하고 있었기에 분리해놨다.)
ref는 그냥 상속을 못한다. 이때 필요한 것이 forwardRef
다.
Ref 전달하기는 일부 컴포넌트가 수신한 ref를 받아 조금 더 아래로 전달(즉, “전송”)할 수 있는 옵트인 기능입니다.
자세한 설명은 공식문서에서...
부모 컴포넌트에서 기존 작성 내용을 가지고 있다면, 부모 컴포넌트에서 useRef
를 불러온다.
그리고 ref를 지정하여 넘겨준다.
//부모 컴포넌트
const editor = useRef()
...
<MarkdownEditor ref={editor} />
//MarkdownEditor
const MarkdownEditor = (props, ref) => {
return <Editor ref={ref} initialValue={props.value}/>
여기서 포인트가 ref는 다른 props와 다르게 취급해야 한다는 것이다. (에러 나서 알게 됨)
첫 번째 인자는 props 객체, 두 번째 인자로 ref를 받아야 한다.
그럼 이제 끝이다.
editor.current.getInstance().setHTML(value);
부모 컴포넌트에서 위와 같은 메서드로 에디터 입력창에 value
를 설정할 수 있다.
글 수정이 아닌, 글 작성 컴포넌트에서는 props로
value="원하는 초기값"
을 내려주어야 한다.
ex)value="please write here..."