react-quill Custom

toolbar 기존 아이콘 변경

import ReactQuill, { Quill } from "react-quill";
import "react-quill/dist/quill.snow.css";

const icons = Quill.import("ui/icons");
icons["bold"] = "<span>B</span>";

export default function Editor() {
    return (
        <div>
            <ReactQuill />
        </div>
    );
}

▼ 종류

종류	설명 (아이콘)
icons["bold"]	굵기
icons["italic"]	기울임
icons["underline"]	밑줄
icons["strike"]	취소선
icons["blockquote"]	인용
icons["color"]	글자색
icons["background"]	배경색
icons["image"]	이미지 첨부
icons["link"]	링크
icons["list"]["ordered"]	순서 있는 리스트
icons["list"]["bullet"]	순서 없는 리스트
icons["list"]["check"]	체크 리스트
icons["align"][""]	왼쪽 정렬
icons["align"]["center"]	가운데 정렬
icons["align"]["right"]	오른쪽 정렬
icons["align"]["justify"]	양쪽 정렬

 

더  많은 종류는 node_modules > quill > ui > icons.js 파일 참고

toolbar 폰트 사이즈 변경

default.js

export const fontSize = ["14px", "16px", "18px", "24px", "28px", "32px"];

 

Toolbar.jsx

import { fontSize } from "./default";

export default function Toolbar() {
    return (
        <div id="toolbar">
            <span className="ql-formats">
                <select className="ql-size">
                    {fontSize.map((val) => (
                        <option value={val} selected={val === "16px"}>
                            {val.replace(/[^0-9]/g, "")}
                        </option>
                    ))}
                </select>
            </span>
        </div>
    );
}

 

index.jsx

import ReactQuill, { Quill } from "react-quill";
import "react-quill/dist/quill.snow.css";
import Toolbar from "./Toolbar";
import { fontSize } from "./default";

var Size = Quill.import("attributors/style/size");
Size.whitelist = fontSize;
Quill.register(Size, true);

const modules = {
    toolbar: {
        container: "#toolbar",
        handlers: {},
    },
};

export default function Editor() {
    return (
        <div>
            <Toolbar />
            <ReactQuill modules={modules} />
        </div>
    );
}

 

https://stackblitz.com/edit/react-vz6kkz?file=src%2Findex.js