TIL : 텍스트 에디터 공부하기

🌼 Quill Editor

편집 과정에서의 화면 포맷이 최종 완성본이랑 거의 똑같게 나온다는 에디터로 기존의 오픈소스 에디터에서 필요한 기능들을 추가해서 사용해야 한다.

 

Quill 설치하기

리액트를 사용할 것이기에 react-quill을 추가하자.

npm install quill@2.0.0

https://github.com/zenoamaro/react-quill#with-webpack-or-create-react-app

GitHub - zenoamaro/react-quill: A Quill component for React.

 

스타일

핵심 및 테마에 대한 스타일시트도 함께 제공된다.

import "quill/dist/quill.core.css";

 

<참고>

https://mingeesuh.tistory.com/entry/Quill-React-%EC%97%90%EB%94%94%ED%84%B0-%EC%82%AC%EC%9A%A9%ED%95%B4%EB%B3%B4%EA%B8%B0-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%97%85%EB%A1%9C%EB%93%9C-%EB%B0%8F-%EC%82%AC%EC%9D%B4%EC%A6%88-%EC%A1%B0%EC%A0%88

Quill React 에디터 사용해보기 (이미지 업로드 및 사이즈 조절)

 

https://velog.io/@stakbucks/React-Quill-WYSIWYG-%EC%97%90%EB%94%94%ED%84%B0-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

React-Quill 사용하기(1)

 

🌱 React-Quill이 어떤 것인지 파악하기만 했다. 추가적으로 코드 짜보기 !