发布于 2026-01-06 1 阅读
0

ReactQuill 与 NextJS DEV 的全球展示与分享挑战赛,由 Mux 呈现:展示你的项目!

ReactQuill 与 NextJS

由 Mux 主办的 DEV 全球展示挑战赛:展示你的项目!

大家好,想和大家分享一下。我一直在寻找与 NextJS 兼容的富文本编辑器,但一直没找到。不过,我找到了让 ReactQuill 运行起来的方法。

导入动态

import dynamic from 'next/dynamic'
Enter fullscreen mode Exit fullscreen mode

之后,使用动态导入 ReactQuill。

const ReactQuill = dynamic(() => import("react-quill"), { ssr: false });
Enter fullscreen mode Exit fullscreen mode

现在您可以轻松使用它了!
例如:

import { useState } from "react";
import dynamic from 'next/dynamic';
const ReactQuill = dynamic(() => import("react-quill"), { ssr: false });
import 'react-quill/dist/quill.snow.css';

function App() {
    const [value, setValue] = useState('')
    return(
       <ReactQuill value={value} onChange={setValue}/>
    )
}

export default App;
Enter fullscreen mode Exit fullscreen mode

希望这能帮到你😊

文章来源:https://dev.to/a7u/reactquill-with-nextjs-478b