如何在nextjs中的Quill文本编辑器中添加自定义字体

Question

我正在 next.js 中使用react-quill 创建一个文本编辑器。我在我的项目中实现了整个文本编辑器。我的项目中有两个主要问题。

第一个是，当我通过从其他站点复制将任何内容粘贴到编辑器中时，它也会粘贴背景，但我希望所有样式都保留在粘贴的文本中，而只是不显示背景颜色。

第二个，是我无法在文本编辑器的字体选项中添加自定义字体。默认情况下，它只显示默认选项，包括“Sans Sarif、Sarif 和 MonaSans”。但是当我尝试在其中添加更多字体时，它只显示“Sans Sarif”而不是我添加的所有自定义字体。

我已经通过安装旧版本的 quill 库而不是最新版本解决了第一个问题：

"quill": "^1.3.7",
"quill-better-table": "^1.2.10",
"quill-table-module": "^1.0.1",
"quilljs": "^0.18.1",
"react-quill": "^2.0.0",
"react-quill-new": "^3.3.3",
"react-quilljs": "^1.2.17",

但现在主要的问题是第二个。我无法在 nextjs 的鹅毛笔文本编辑器中添加自定义字体。

Github 存储库

如果您通过此存储库提供解决方案，将会非常有帮助。

这是 Editor.tsx：

'use client'
import Quill from "quill";
import "quill/dist/quill.snow.css";
import { useQuill } from "react-quilljs";
export default function Editor() {
  var Font = Quill.import('formats/font');
Font.whitelist = ['Ubuntu', 'Raleway', 'Roboto', 'Mirza'];
Quill.register(Font, true);
  
  const { quill, quillRef } = useQuill({
    theme: 'snow', // Default theme
    modules: {
      toolbar: [
        ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
        ['blockquote', 'code-block'],
        ['link', 'image', 'video', 'formula'],
      
        [{ 'header': 1 }, { 'header': 2 }],               // custom button values
        [{ 'list': 'ordered'}, { 'list': 'bullet' }, { 'list': 'check' }],
        [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
        [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
        [{ 'direction': 'rtl' }],                         // text direction
      
        [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
      
        [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
        [{ 'font': Font.whitelist }],
        [{ 'align': [] }],
        ['clean'],
        ['insertHorizontalLine'],                                      // remove formatting button
      ],
    },
  });


  return (
    <div style={{ width: 1000, height: 300 }}>
      <div ref={quillRef} />
    </div>
    
  );
}

'@/app/global.tsx'：

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

@font-face{
  font-family: "textual";
  src: url("../../public/font/textual.ttf")
}
@font-face{
  font-family: "roboto";
  src: url("../../public/font/Roboto-Black.ttf");
}
body {
  color: var(--foreground);
  background: var(--background);
  font-family: Arial, Helvetica, sans-serif;
}

.textual{
  font-family: "textual";
}
.roboto{
  font-family: "roboto";
}
.ql-font-roboto{
  font-family: "roboto";
}
.ql-editor {
    font-family: '__ManropeFont_e02189', '__ManropeFont_Fallback_e02189' !important;
}

'@/app/page.tsx'：

'use client'

import Editor from "@/components/Editor";
import { useState } from "react";
export default function Home() {
const [isRoboto, setIsRoboto] = useState(false);

  return (
   <main>
    <br />
    <Editor/>
   </main>
  );
}

我在 stackOverflow 上搜索，得到了相同的问题和答案，但它们是在 js 的上下文中提出和解决的。但我正在研究 Nextjs。我在项目中应用了所有解决方案，但找不到解决方案。我也尝试通过使用chatgpt或gemini来获得AI的帮助，但无法得到解决方案。

我已经尝试过这个和许多其他类似的解决方案，但无法得到解决方案：

const font = Quill.import('attributors/style/font');
font.whitelist = ['asap', 'podkova'];
Quill.register(font, true);

我也使用了动态，但得到了解决方案。 我还使用了不同的解决方案方法，例如使用接下来的动态函数。我还尝试通过应用 css 类来解决问题，并应用其他可用的不同解决方案。

Answer 1

不幸的是，大约 16 个小时过去了，仍然没有人回答我的问题。 不过，我解决了这个问题，并在 Next.js 中实现了带有自定义字体实现的鹅毛笔文本编辑器。任何想要获得解决方案的人都可以访问我的存储库：

Github 存储库