Tiptap 中文文档

文字方向与 RTL 支持

Tiptap 内置支持从右到左（RTL）语言和双向文本。此示例展示了如何设置全局文字方向以及控制单个节点的文字方向。

功能

  • 全局方向控制：为所有内容设置默认文字方向（ltr、rtl 或 auto）
  • 单节点方向：使用命令覆盖特定节点的文字方向
  • 双向文本：正确渲染混合的 LTR 和 RTL 内容
  • 多语言支持：支持英语、阿拉伯语、希伯来语等多种语言

auto 设置对于双向内容特别有用，会自动根据每个节点中第一个强方向字符检测文字方向。

使用方法

设置全局方向

配置编辑器时设置默认文字方向：

import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'

const editor = new Editor({
  extensions: [StarterKit],
  textDirection: 'auto', // 或 'ltr'，'rtl'
})

使用命令控制方向

对特定内容覆盖文字方向：

// 设置选中文本为 RTL 方向
editor.commands.setTextDirection('rtl')

// 设置选中文本为 LTR 方向
editor.commands.setTextDirection('ltr')

// 使用自动检测
editor.commands.setTextDirection('auto')

// 移除方向覆盖
editor.commands.unsetTextDirection()

与框架搭配使用

文字方向可以通过重新创建编辑器并传入新的 textDirection 选项动态改变。此用法在上方使用 React useEditor 钩子的示例中有所展示。

Previously任务列表