---
title: "简单编辑器 Tiptap 模板"
description: "将 Tiptap 开源编辑器与 UI 组件和开源扩展集成。更多信息请查看文档。"
canonical_url: "https://tiptap.zhcndoc.com/ui-components/templates/simple-editor"
---

# 简单编辑器 Tiptap 模板

将 Tiptap 开源编辑器与 UI 组件和开源扩展集成。更多信息请查看文档。

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

[全屏查看](https://template.tiptap.dev/preview/templates/simple)

[GitHub 仓库](https://github.com/ueberdosis/tiptap-ui-components/tree/main/apps/web/src/components/tiptap-templates/simple)

> **Interactive demo:** [simple](https://template.tiptap.dev/preview/templates/simple)

## 安装

### 适用于现有项目

```bash
npx @tiptap/cli@latest add simple-editor
```

### 适用于新项目

```bash
npx @tiptap/cli@latest init simple-editor
```

## 样式

此模板需要进行样式设置。我们对样式框架保持中立，因此您需要将其与您的项目样式配置集成。请按照 [样式设置指南](https://tiptap.zhcndoc.com/ui-components/getting-started/style.md) 进行操作，以确保编辑器能够正确显示。

## 使用

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

```jsx
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 组件，可以轻松集成！不需要重做。