Quill 에디터 쉽게 적용하기 - react vite 프로젝트 웹서비스, 웹개발, 자바스크립트, 리치 텍스트 편집기

Quill 에디터 쉽게 적용하기 - react vite 프로젝트 웹서비스, 웹개발, 자바스크립트, 리치 텍스트 편집기

​

웹서비스 개발중 텍스트 편집기가 필요한 경우가 있습니다.

이를 빠르게 구현 할수 있는 npm 패키지인 quill 리치 텍스트 편집기 적용, 사용법을 간단히 블로그 글로 남겨봅니다.

 

https://www.npmjs.com/package/quill

https://www.npmjs.com/package/quill

Quill 간단 설명

 

Quill 은 오픈 소스 리치 텍스트 에디터(rich text editㅐr) 입니다.

웹에서 글 작성시 사용하는 툴, 지금의 네이터에디터 같은 역할을 하지요.

웹에서 글 작성시 볼드, 이텔릭, 링크, 이미지 삽입 같은 서식을 손쉽게 적용할 수 있습니다.

​

사용법이 간단하고, react, vue, angular 같은 프론트엔드 프레임워크에서도 쉬운 사용과 적용으로 많이 사용되고 있습니다.

​

Quill 설치 방법

설치 할 프로젝트 폴더로 터미널을 실행합니다.

이어서 아래 명령어로 quill를 설치합니다

$ npm install quill

​

설치를 완료하고, 소스에 적용을 하고자합니다.

app.jsx 소스 상단에 임포트/적용 소스를 추가합니다.

import "quill/dist/quill.snow.css"

이어서 추가, 구현할 웹페이지 소스에 해당 quill 패키지 소스를 적용합니다.

​

예시 소스를 적어봅니다.

 

import React, { useEffect, useRef } from "react"; import Quill from "quill"; import "quill/dist/quill.snow.css"; const Editor = () => { const editorRef = useRef(null); useEffect(() => { new Quill(editorRef.current, { theme: "snow", }); }, []); return <div ref={editorRef} />; }; export default Editor;

해당 웹페이지를 호출!

위와 같은 화면 일부를 볼수 있습니다!

 

텍스트 에디터 답게, 폰트크기, 이탤릭, 볼드 다양하게 설정 가능해요.

​

편하게 적용 및 사용하시길 바랍니다!

​

자세한 문서를 보면 다양한 디자인 설정이 가능합니다.

앞선 링크를 참고해주세요~

​

끝!