[MD]React-quill의 칼라 팔레트 개수 변경

 

기본으로 제공된 quill 팔레트 개수를 수정하고 싶을 경우, 아래와 같은 방법을 사용한다.

 

 

📍사용자에게 제공하는 색상 개수 수정

quill에서 color을 쓰면 위와 같이 꽤 많은 색상 항목을 보여준다.

그러나 너무 많은 선택지가 불편하다면 아래와 같이 지정 색상을 커스텀 가능하다.

import { Quill } from 'react-quill-new'; //react-quill을 쓰는 대신 new를 쓰고 있다.

//원하는 색상만 선택
const customColors = [
  '#000000', // Black
  '#FF0000', // Red
  '#00FF00', // Green
  '#0000FF', // Blue
  '#FFFF00', // Yellow
  '#FFA500', // Orange
  '#800080', // Purple
  '#008080', // Teal
  '#FFC0CB', // Pink
  '#808080' // Gray
];

const ColorStyle = Quill.import('attributors/style/color') as any;
ColorStyle.whitelist = customColors; // 색상 목록 제한
Quill.register(ColorStyle, true);

 

이후 툴바 옵션에서 해당 항목으로 추가한다.

const toolbarOptions = [['bold', { color: [] }]];
//이렇게 사용하던 부분을

//아래와 같이 바꾼다.
const toolbarOptions = [['bold', { color: customColors }]];

 

 

필요한 색상만 추가된 것을 볼 수 있다. CSS가 다양한 색상에 맞춰져 있기 때문에 이후 CSS 쪽을 좀 수정해야 할 것이다.

 

 

 

💡global css로 적용

참고로 next에서 사용 중인 라이브러리 css를 건드리려면 global 적용해야 해서... (반드시 이런진 모르겠지만 다른 방법을 시도할 경우 css 변경이 전혀 되지 않는다.) 아래와 같이 사용 중이다.

.ql-picker-options라는 항목이 color을 담은 박스 클래스명이다. 혹시 css 디자인을 따로 커스텀할 경우 참고.

.customQuill은 QuillWrapper에 임의로 붙인 클래스 이름이다.

/*색상 팔레트 */
.customQuill
  :global(.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options) {
  width: 1000%;
  position: absolute;
  top: -5rem;
}