# Quill 最佳实践

pnpm i quill
pnpm i quill-table-up
import Quill, { type QuillOptions } from "quill";
import TableUp, {
    defaultCustomSelect,
    TableAlign,
    TableMenuContextmenu,
    TableResizeBox,
    TableResizeScale,
    TableSelection,
    TableVirtualScrollbar,
} from "quill-table-up";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css"; // 引入 snow.css 文件
import 'quill-table-up/index.css';
import 'quill-table-up/table-creator.css';

Quill.register({ `modules/table-up`: TableUp }, true);

const toolbarOptions = [
    [ // use picker to enable the customSelect option
        { 'table-up': [] }
    ],
    ["clean"], // remove formatting button
];

const options: QuillOptions = {
    debug: "info",
    modules: {
        toolbar: toolbarOptions,
        table: true,
        'table-up': {
            scrollbar: TableVirtualScrollbar,
            align: TableAlign,
            resize: TableResizeBox,
            resizeScale: TableResizeScale,
            customSelect: defaultCustomSelect,
            selection: TableSelection,
            selectionOptions: {
                tableMenu: TableMenuContextmenu,
            }
        }
    },
    placeholder: "Compose an epic...",
    theme: "snow",
};