如何将 Tiptap 富文本编辑器与 ShadCN UI 和 Next.js 集成？

Question

我正在开发一个 Next.js 项目，使用 ShadCN UI 作为我的表单组件。我想用 Tiptap 富文本编辑器替换表单中描述字段的简单字段。

这是我的表单字段的当前代码：

<FormField
  control={form.control}
  name="description"
  render={({ field }) => (
    <FormItem className="mt-6 flex lg:space-x-12 max-lg:space-y-6 lg:flex-row flex-col sm:max-w-5xl max-w-xl justify-between">
      <div className="w-[284px] mt-3">
        <FormLabel className="font-semibold">Description</FormLabel>
      </div>
      <div className="space-y-6 flex-1">
        <FormControl>
          <Input {...field} placeholder="Description" />
        </FormControl>
        <FormMessage />
      </div>
    </FormItem>
  )}
/>

我已经安装了 Tiptap 及其必要的扩展：

npm install @tiptap/core @tiptap/react @tiptap/starter-kit @tiptap/extension-link @tiptap/extension-placeholder 

如何用 Tiptap 编辑器替换该字段，

Answer 1

您必须创建自己的组件并对其进行自定义。这是 github 上的示例：https://github.com/DevendraBhoraniya/text_editor

Answer 2

这个最小的tiptap有一个最小的设置。还有一个关于如何将它与react-hook-form一起使用的示例