마크다운 에디터 적용

• toast-ui를 쓰면서 생긴 이슈

npm i -S @toast-ui/editor

했을때 오류파티🤗

구글링결과 리액트 18은 안되고 17로 다운그레이드를 시켜야 한다고했다. 우선은 --legacy-peer-deps를 붙여서 해결했지만, 추후 문제가 생긴다면 다운그레이드를 진행해야할 듯 싶다.

다운그레이드 하는 방법은 아래 코드를 쳐서 진행한다.

npm install --save react@^17.0.1 react-dom@17.0.1

이후 Edit.js 에서 임포트 진행시켜주고 진행했다.

import { Editor } from '@toast-ui/react-editor';
import '@toast-ui/editor/dist/toastui-editor.css'; // Editor 스타일

 

function EditorComp() {
  const textRef = React.createRef();
  const [descriptions, setDescriptions] = useState('');
  const handleChangeInput = () => {
    setDescriptions(textRef.current.getInstance().getMarkdown());
  };
  return (
    <Container>
      <Editor
        ref={textRef}
        previewStyle="tab"
        initialValue={descriptions}
        height="500px" !
        autofocus={false}
        initialEditType="markdown"
        theme="dark"
        useCommandShortcut
        onChange={handleChangeInput}
        placeholder="내용을 입력해주세요"
      />
    </Container>
  );
}

이런 오류가 지속적으로 나고 다른분의 오류도 계속 나서 쓸 수 가없었다.

---

💡두번째 시도

우리가 옮기기로한 에디터는 ckEditor

우선 깔아뒀던 토스트를 package.json에서 지우고 npm purune해서 모듈도 삭제해줬다.

npm i -S @ckeditor/ckeditor5-react 
npm i -S @ckeditor/ckeditor5-build-classic

그리고 두개를 인스톨해줬다.

ckeditor 적용 화면

하지만 이것도 커스텀해서 쓰려니 마크다운은 적용되지않아서 포기...ㅠㅠ

---

💡세번째 시도

다시 다른 에디터를 찾다가 md-editor라는 생소한 에디터를 발견했다!

md-editor

@uiw/react-md-editor

👇설치

npm install rehype-sanitize
npm i @uiw/react-md-editor

설치해주니 무리없이 잘 실행되는데 내 화면에서만 다크모드로 디폴트 설정이 되었다..ㅠㅠ

💪🏻해결

document.documentElement.setAttribute('data-color-mode', 'light');

• height 변경 방법

height?: number=200: The height of the editor. ️⚠️ Dragbar is invalid when height parameter percentage.
maxHeight?: number=1200: Maximum drag height. The visibleDragbar=true value is valid.
minHeights?: number=100: Minimum drag height. The visibleDragbar=true value is valid.

문서에는 변경이 이렇게 써있는데 우리는 react에 적용해야하므로

height={800}

이걸로 적용!!

 

에디터 적용도 끝났다!!!!