探索 Tiptap V3 的最新功能

简单编辑器 Tiptap 模板

简单编辑器模板是一个完整工作的 Tiptap 编辑器设置。它包括常用的开源扩展和 UI 组件,所有组件都采用 MIT 许可证,并且可以随意自定义。

安装

使用 Tiptap CLI(适用于 Vite 或 Next.js)将简单编辑器模板添加到您的项目中:

npx @tiptap/cli add simple-editor

样式

缺少样式?

如果您尚未添加样式,请务必按照样式设置指南进行操作,以确保编辑器和组件能够正确渲染。

使用

安装后,在您的 React 或 Next.js 项目中使用 SimpleEditor 组件:

import { SimpleEditor } from '@/components/tiptap-templates/simple/simple-editor'

export default function App() {
  return <SimpleEditor />
}

特性

一个完全响应式的富文本编辑器,内置对常见格式化和布局工具的支持。所有组件都是开源的,并且易于扩展。

  • 响应式设计:默认支持移动端
  • 深色和浅色模式:开箱即用
  • 格式化:粗体、斜体、下划线
  • 列表:项目符号、编号、有框选项
  • 文本对齐:左对齐、居中、右对齐、两端对齐
  • 标题:通过下拉菜单支持多个级别
  • 图片上传
  • 链接编辑:用于添加和编辑链接的 UI
  • 撤销 / 重做:历史管理

使用的参考组件

Hooks

  • use-mobile
  • use-window-size

图标

  • arrow-left-icon
  • highlighter-icon
  • link-icon
  • moon-star-icon
  • sun-icon

扩展

  • selection-extension
  • link-extension
  • trailing-node-extension

  • tiptap-utils

UI 组件

  • blockquote-button
  • code-block-button
  • color-highlight-button
  • color-highlight-popover
  • heading-button
  • heading-dropdown-menu
  • image-upload-button
  • link-popover
  • list-button
  • list-dropdown-menu
  • mark-button
  • text-align-button
  • undo-redo-button

节点组件

  • code-block-node
  • image-node
  • image-upload-node
  • list-node
  • paragraph-node

基础组件

  • button
  • spacer
  • toolbar

许可证

简单编辑器模板及其所有组件均采用 MIT 许可证。您可以根据需要自由使用、修改和扩展代码。

未来兼容性

您可以根据需求增长,扩展此模板以增加额外功能。

付费 Tiptap Cloud 功能将具有相应的 UI 组件,可以轻松集成!不需要重做。