使用 NextJS 从 React Quill 库导入“ui/icons”时未定义获取文档

问题描述 投票：0回答：1

一切都很好，直到我导入 Quill.import('ui/icons') 来覆盖库的默认图标。它返回“文档未定义”。有什么办法可以解决这个问题吗？

import { Stack } from '@mui/material'
import * as React from 'react'
import { useMemo, useState } from 'react'
import 'react-quill/dist/quill.snow.css'
import dynamic from 'next/dynamic'
import { RedoIcon } from 'libs/icons'
import { Quill } from 'react-quill'

interface Props {}

const modules = {
  toolbar: [
    ['undo', 'redo'],
    ['bold', 'italic', 'underline', 'strike'], // toggled buttons
    ['blockquote', 'code-block'],
}

const CustomQuill = () => {
  const [value, setValue] = useState('')
  const ReactQuill = useMemo(() => dynamic(() => import('react-quill'), { ssr: false }), [])

  const icons = Quill.import('ui/icons')
  icons['undo'] = <RedoIcon />

  return (
    <Stack>
      {typeof window !== 'undefined' && (
        <ReactQuill value={value} onChange={setValue} modules={modules} />
      )}
    </Stack>
  )
}

export default CustomQuill
typescript next.js quill react-quill
1个回答
0
投票

参考与信用 - https://stackoverflow.com/a/77369928/2633390

QuillEditor.consts.ts

export const TOOLBAR_ICONS = {
  BOLD_ICON: `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="currentColor"><path d="M20.5 13.5C20.5 13.0404 20.4095 12.5852 20.2336 12.1606C20.0577 11.736 19.7999 11.3501 19.4749 11.0251C19.1499 10.7001 18.764 10.4423 18.3394 10.2664C17.9148 10.0905 17.4596 10 17 10H12.5C12.2348 10 11.9804 10.1054 11.7929 10.2929C11.6054 10.4804 11.5 10.7348 11.5 11V21C11.5 21.2652 11.6054 21.5196 11.7929 21.7071C11.9804 21.8946 12.2348 22 12.5 22H17C17.6967 22.003 18.3783 21.7975 18.9572 21.4098C19.536 21.0221 19.9856 20.4701 20.2481 19.8247C20.5105 19.1794 20.5738 18.4703 20.4298 17.7886C20.2858 17.107 19.9411 16.4841 19.44 16C19.7743 15.6749 20.0403 15.2863 20.2223 14.857C20.4044 14.4277 20.4988 13.9663 20.5 13.5ZM17 20H13.5V17H17C17.3978 17 17.7794 17.158 18.0607 17.4393C18.342 17.7206 18.5 18.1022 18.5 18.5C18.5 18.8978 18.342 19.2794 18.0607 19.5607C17.7794 19.842 17.3978 20 17 20ZM17 15H13.5V12H17C17.3978 12 17.7794 12.158 18.0607 12.4393C18.342 12.7206 18.5 13.1022 18.5 13.5C18.5 13.8978 18.342 14.2794 18.0607 14.5607C17.7794 14.842 17.3978 15 17 15Z" fill="currentColor" /></svg>`,
  ITALIC_ICON: `<svg width="32" height="32" viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M21 10H15C14.7348 10 14.4804 10.1054 14.2929 10.2929C14.1054 10.4804 14 10.7348 14 11C14 11.2652 14.1054 11.5196 14.2929 11.7071C14.4804 11.8946 14.7348 12 15 12H16.52L13.32 20H11C10.7348 20 10.4804 20.1054 10.2929 20.2929C10.1054 20.4804 10 20.7348 10 21C10 21.2652 10.1054 21.5196 10.2929 21.7071C10.4804 21.8946 10.7348 22 11 22H17C17.2652 22 17.5196 21.8946 17.7071 21.7071C17.8946 21.5196 18 21.2652 18 21C18 20.7348 17.8946 20.4804 17.7071 20.2929C17.5196 20.1054 17.2652 20 17 20H15.48L18.68 12H21C21.2652 12 21.5196 11.8946 21.7071 11.7071C21.8946 11.5196 22 11.2652 22 11C22 10.7348 21.8946 10.4804 21.7071 10.2929C21.5196 10.1054 21.2652 10 21 10Z" fill="currentColor" /></svg>`,
  UNDERLINE_ICON: `<svg width="32" height="32" viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M16 19.5C17.3261 19.5 18.5979 18.9732 19.5355 18.0355C20.4732 17.0979 21 15.8261 21 14.5V9.5C21 9.23478 20.8946 8.98043 20.7071 8.79289C20.5196 8.60536 20.2652 8.5 20 8.5C19.7348 8.5 19.4804 8.60536 19.2929 8.79289C19.1054 8.98043 19 9.23478 19 9.5V14.5C19 15.2956 18.6839 16.0587 18.1213 16.6213C17.5587 17.1839 16.7956 17.5 16 17.5C15.2044 17.5 14.4413 17.1839 13.8787 16.6213C13.3161 16.0587 13 15.2956 13 14.5V9.5C13 9.23478 12.8946 8.98043 12.7071 8.79289C12.5196 8.60536 12.2652 8.5 12 8.5C11.7348 8.5 11.4804 8.60536 11.2929 8.79289C11.1054 8.98043 11 9.23478 11 9.5V14.5C11 15.8261 11.5268 17.0979 12.4645 18.0355C13.4021 18.9732 14.6739 19.5 16 19.5ZM21 21.5H11C10.7348 21.5 10.4804 21.6054 10.2929 21.7929C10.1054 21.9804 10 22.2348 10 22.5C10 22.7652 10.1054 23.0196 10.2929 23.2071C10.4804 23.3946 10.7348 23.5 11 23.5H21C21.2652 23.5 21.5196 23.3946 21.7071 23.2071C21.8946 23.0196 22 22.7652 22 22.5C22 22.2348 21.8946 21.9804 21.7071 21.7929C21.5196 21.6054 21.2652 21.5 21 21.5Z" fill="currentColor"/></svg>`,
  LINK_ICON: `<svg width="32" height="32" viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M16.1098 19.39L14.2298 21.27C13.7601 21.7234 13.1327 21.9767 12.4798 21.9767C11.827 21.9767 11.1996 21.7234 10.7298 21.27C10.4994 21.0405 10.3166 20.7678 10.1919 20.4675C10.0671 20.1672 10.0029 19.8452 10.0029 19.52C10.0029 19.1948 10.0671 18.8728 10.1919 18.5725C10.3166 18.2722 10.4994 17.9995 10.7298 17.77L12.6098 15.89C12.7981 15.7017 12.9039 15.4463 12.9039 15.18C12.9039 14.9137 12.7981 14.6583 12.6098 14.47C12.4215 14.2817 12.1661 14.1759 11.8998 14.1759C11.6335 14.1759 11.3781 14.2817 11.1898 14.47L9.30984 16.36C8.52819 17.2108 8.10546 18.3307 8.12991 19.4858C8.15436 20.6408 8.62412 21.7418 9.44107 22.5588C10.258 23.3757 11.359 23.8455 12.5141 23.8699C13.6692 23.8944 14.789 23.4716 15.6398 22.69L17.5298 20.81C17.7181 20.6217 17.8239 20.3663 17.8239 20.1C17.8239 19.8337 17.7181 19.5783 17.5298 19.39C17.3415 19.2017 17.0861 19.0959 16.8198 19.0959C16.5535 19.0959 16.2981 19.2017 16.1098 19.39ZM22.6898 9.31C21.8486 8.47401 20.7108 8.00479 19.5248 8.00479C18.3389 8.00479 17.2011 8.47401 16.3598 9.31L14.4698 11.19C14.3766 11.2832 14.3026 11.3939 14.2522 11.5157C14.2017 11.6376 14.1757 11.7681 14.1757 11.9C14.1757 12.0319 14.2017 12.1624 14.2522 12.2842C14.3026 12.4061 14.3766 12.5168 14.4698 12.61C14.5631 12.7032 14.6738 12.7772 14.7956 12.8277C14.9174 12.8781 15.048 12.9041 15.1798 12.9041C15.3117 12.9041 15.4423 12.8781 15.5641 12.8277C15.6859 12.7772 15.7966 12.7032 15.8898 12.61L17.7698 10.73C18.2396 10.2766 18.867 10.0233 19.5198 10.0233C20.1727 10.0233 20.8001 10.2766 21.2698 10.73C21.5002 10.9595 21.683 11.2322 21.8078 11.5325C21.9325 11.8328 21.9967 12.1548 21.9967 12.48C21.9967 12.8052 21.9325 13.1272 21.8078 13.4275C21.683 13.7278 21.5002 14.0005 21.2698 14.23L19.3898 16.11C19.2961 16.203 19.2217 16.3136 19.1709 16.4354C19.1202 16.5573 19.094 16.688 19.094 16.82C19.094 16.952 19.1202 17.0827 19.1709 17.2046C19.2217 17.3264 19.2961 17.437 19.3898 17.53C19.4828 17.6237 19.5934 17.6981 19.7153 17.7489C19.8371 17.7997 19.9678 17.8258 20.0998 17.8258C20.2318 17.8258 20.3626 17.7997 20.4844 17.7489C20.6063 17.6981 20.7169 17.6237 20.8098 17.53L22.6898 15.64C23.5258 14.7988 23.995 13.661 23.995 12.475C23.995 11.289 23.5258 10.1512 22.6898 9.31ZM12.8298 19.17C12.9233 19.2627 13.0341 19.336 13.1559 19.3858C13.2778 19.4355 13.4082 19.4608 13.5398 19.46C13.6714 19.4608 13.8019 19.4355 13.9237 19.3858C14.0456 19.336 14.1564 19.2627 14.2498 19.17L19.1698 14.25C19.3581 14.0617 19.4639 13.8063 19.4639 13.54C19.4639 13.2737 19.3581 13.0183 19.1698 12.83C18.9815 12.6417 18.7261 12.5359 18.4598 12.5359C18.1935 12.5359 17.9381 12.6417 17.7498 12.83L12.8298 17.75C12.7361 17.843 12.6617 17.9536 12.6109 18.0754C12.5602 18.1973 12.534 18.328 12.534 18.46C12.534 18.592 12.5602 18.7227 12.6109 18.8446C12.6617 18.9664 12.7361 19.077 12.8298 19.17Z" fill="currentColor"/></svg>`,
  LIST_BULLETS_ICON: `<svg width="32" height="32" viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M7.71023 20.29C7.61513 20.199 7.50298 20.1276 7.38023 20.08C7.13677 19.98 6.86369 19.98 6.62023 20.08C6.49748 20.1276 6.38534 20.199 6.29023 20.29C6.19919 20.3851 6.12783 20.4972 6.08023 20.62C6.00365 20.8021 5.98273 21.0028 6.0201 21.1968C6.05748 21.3908 6.15147 21.5694 6.29023 21.71C6.38743 21.7983 6.49905 21.8694 6.62023 21.92C6.73993 21.9729 6.86936 22.0002 7.00023 22.0002C7.1311 22.0002 7.26053 21.9729 7.38023 21.92C7.50142 21.8694 7.61303 21.7983 7.71023 21.71C7.84899 21.5694 7.94299 21.3908 7.98036 21.1968C8.01773 21.0028 7.99681 20.8021 7.92023 20.62C7.87264 20.4972 7.80127 20.3851 7.71023 20.29ZM11.0002 12H25.0002C25.2654 12 25.5198 11.8946 25.7073 11.7071C25.8949 11.5196 26.0002 11.2652 26.0002 11C26.0002 10.7348 25.8949 10.4804 25.7073 10.2929C25.5198 10.1054 25.2654 10 25.0002 10H11.0002C10.735 10 10.4807 10.1054 10.2931 10.2929C10.1056 10.4804 10.0002 10.7348 10.0002 11C10.0002 11.2652 10.1056 11.5196 10.2931 11.7071C10.4807 11.8946 10.735 12 11.0002 12ZM7.71023 15.29C7.56961 15.1512 7.39104 15.0572 7.19705 15.0199C7.00306 14.9825 6.80234 15.0034 6.62023 15.08C6.49905 15.1306 6.38743 15.2017 6.29023 15.29C6.19919 15.3851 6.12783 15.4972 6.08023 15.62C6.02733 15.7397 6 15.8691 6 16C6 16.1309 6.02733 16.2603 6.08023 16.38C6.13087 16.5012 6.2019 16.6128 6.29023 16.71C6.38743 16.7983 6.49905 16.8694 6.62023 16.92C6.73993 16.9729 6.86936 17.0002 7.00023 17.0002C7.1311 17.0002 7.26053 16.9729 7.38023 16.92C7.50142 16.8694 7.61303 16.7983 7.71023 16.71C7.79856 16.6128 7.86959 16.5012 7.92023 16.38C7.97314 16.2603 8.00047 16.1309 8.00047 16C8.00047 15.8691 7.97314 15.7397 7.92023 15.62C7.87264 15.4972 7.80127 15.3851 7.71023 15.29ZM25.0002 15H11.0002C10.735 15 10.4807 15.1054 10.2931 15.2929C10.1056 15.4804 10.0002 15.7348 10.0002 16C10.0002 16.2652 10.1056 16.5196 10.2931 16.7071C10.4807 16.8946 10.735 17 11.0002 17H25.0002C25.2654 17 25.5198 16.8946 25.7073 16.7071C25.8949 16.5196 26.0002 16.2652 26.0002 16C26.0002 15.7348 25.8949 15.4804 25.7073 15.2929C25.5198 15.1054 25.2654 15 25.0002 15ZM7.71023 10.29C7.61513 10.199 7.50298 10.1276 7.38023 10.08C7.19812 10.0034 6.99741 9.9825 6.80342 10.0199C6.60943 10.0572 6.43086 10.1512 6.29023 10.29C6.2019 10.3872 6.13087 10.4988 6.08023 10.62C6.02733 10.7397 6 10.8691 6 11C6 11.1309 6.02733 11.2603 6.08023 11.38C6.13087 11.5012 6.2019 11.6128 6.29023 11.71C6.38743 11.7983 6.49905 11.8694 6.62023 11.92C6.80234 11.9966 7.00306 12.0175 7.19705 11.9801C7.39104 11.9428 7.56961 11.8488 7.71023 11.71C7.79856 11.6128 7.86959 11.5012 7.92023 11.38C7.97314 11.2603 8.00047 11.1309 8.00047 11C8.00047 10.8691 7.97314 10.7397 7.92023 10.62C7.86959 10.4988 7.79856 10.3872 7.71023 10.29ZM25.0002 20H11.0002C10.735 20 10.4807 20.1054 10.2931 20.2929C10.1056 20.4804 10.0002 20.7348 10.0002 21C10.0002 21.2652 10.1056 21.5196 10.2931 21.7071C10.4807 21.8946 10.735 22 11.0002 22H25.0002C25.2654 22 25.5198 21.8946 25.7073 21.7071C25.8949 21.5196 26.0002 21.2652 26.0002 21C26.0002 20.7348 25.8949 20.4804 25.7073 20.2929C25.5198 20.1054 25.2654 20 25.0002 20Z" fill="currentColor"/></svg>`,
  LIST_ORDERED_ICON: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M8 20H5V19.9C5 19.4 5.4 19 5.9 19C7.3 19 8.5 18.1 8.9 16.8C9.3 15.2 8.4 13.5 6.8 13.1C5.5 12.7 4.1 13.3 3.4 14.5C3.1 15 3.3 15.6 3.8 15.9C4.3 16.2 4.9 16 5.2 15.5C5.5 15 6.1 14.9 6.6 15.2C6.7 15.3 6.8 15.3 6.8 15.4C7 15.7 7 16 7 16.3C6.8 16.7 6.4 17 6 17C4.3 17 3 18.3 3 19.9V21C3 21.6 3.4 22 4 22H8C8.6 22 9 21.6 9 21C9 20.4 8.6 20 8 20ZM12 7H20C20.6 7 21 6.6 21 6C21 5.4 20.6 5 20 5H12C11.4 5 11 5.4 11 6C11 6.6 11.4 7 12 7ZM8 9H7V3C7 2.4 6.6 2 6 2C5.4 2 5 2.4 5 3V4H4C3.4 4 3 4.4 3 5C3 5.6 3.4 6 4 6H5V9H4C3.4 9 3 9.4 3 10C3 10.6 3.4 11 4 11H8C8.6 11 9 10.6 9 10C9 9.4 8.6 9 8 9ZM20 16H12C11.4 16 11 16.4 11 17C11 17.6 11.4 18 12 18H20C20.6 18 21 17.6 21 17C21 16.4 20.6 16 20 16Z" fill="currentColor"/></svg>`,
};

export const FORMATS = ['bold', 'italic', 'underline', 'link', 'list'];

export const TOOLBAR_ID = 'quill_toolbar_id';

export const MODULES = {
  toolbar: `#${TOOLBAR_ID}`,
};

export const TEXT_AREA_HEIGHT = 200;

QuillEditor.tsx

import dynamic from 'next/dynamic';
import { LegacyRef, JSX } from 'react';
import type ReactQuill from 'react-quill';

import { TOOLBAR_ICONS } from './QuillEditor.consts.ts';

interface IWrappedComponent extends React.ComponentProps<typeof ReactQuill> {
  forwardedRef: LegacyRef<ReactQuill>;
}

const ReactQuillBase = dynamic(
  async () => {
    const { default: RQ } = await import('react-quill');

    function QuillJS({ ...props }: React.ComponentProps<typeof ReactQuill>) {
      const icons = RQ.Quill.import('ui/icons');
      icons.bold = TOOLBAR_ICONS.BOLD_ICON;
      icons.italic = TOOLBAR_ICONS.ITALIC_ICON;
      icons.underline = TOOLBAR_ICONS.UNDERLINE_ICON;
      icons.link = TOOLBAR_ICONS.LINK_ICON;
      icons.list = {
        bullet: TOOLBAR_ICONS.LIST_BULLETS_ICON,
        ordered: TOOLBAR_ICONS.LIST_ORDERED_ICON,
      };

      return <RQ {...props} />;
    }

    return QuillJS;
  },
  {
    ssr: false,
  },
);

export function QuillEditor(
  params: JSX.IntrinsicAttributes &
    IWrappedComponent & {
      minHeight: number;
      maxHeight: number;
    },
) {
  return (
    <>
      <ReactQuillBase {...params} />
    </>
  );
}

QuillToolbar.tsx

import { TOOLBAR_ID } from './QuillEditor.consts';

// https://quilljs.com/docs/modules/toolbar/
export const QuillToolbar = () => {
  return (
    <div id={TOOLBAR_ID}>
      <div className="ql-formats">
          <button className="ql-bold" />
          <button className="ql-italic" />
          <button className="ql-underline" />
          <button className="ql-link" />
          <button className="ql-list" value="bullet" />
          <button className="ql-list" value="ordered" />
      </div>
    </div>
  );
};

用法

<>
  <QuillToolbar />
  <QuillEditor
        forwardedRef={quillTextAreaRef}
        defaultValue={quillValue as DeltaStatic}
        onChange={handleChange}
        modules={MODULES}
        minHeight={TEXT_AREA_HEIGHT}
        maxHeight={TEXT_AREA_HEIGHT}
        onKeyDown={handleKeyDown}
        onBlur={handleBlur}
        placeholder={placeholder}
        onFocus={handleFocus}
        formats={FORMATS}
      />
</>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.