简单编辑器 Tiptap 模板

Available for free

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

安装

适用于现有项目

npx @tiptap/cli@latest add simple-editor

适用于新项目

npx @tiptap/cli@latest init 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 组件,可以轻松集成!不需要重做。