简单编辑器 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-mobileuse-window-size
图标
arrow-left-iconhighlighter-iconlink-iconmoon-star-iconsun-icon
扩展
selection-extensionlink-extensiontrailing-node-extension
库
tiptap-utils
UI 组件
blockquote-buttoncode-block-buttoncolor-highlight-buttoncolor-highlight-popoverheading-buttonheading-dropdown-menuimage-upload-buttonlink-popoverlist-buttonlist-dropdown-menumark-buttontext-align-buttonundo-redo-button
节点组件
code-block-nodeimage-nodeimage-upload-nodelist-nodeparagraph-node
基础组件
buttonspacertoolbar
许可证
简单编辑器模板及其所有组件均采用 MIT 许可证。您可以根据需要自由使用、修改和扩展代码。
未来兼容性
您可以根据需求增长,扩展此模板以增加额外功能。
付费 Tiptap Cloud 功能将具有相应的 UI 组件,可以轻松集成!不需要重做。