RichTextEditor 富文本编辑器

基于 Tiptap 构建的主题感知所见即所得编辑器,用于富文本编辑,具有可自定义的工具栏。

安装

此组件需要 @tiptap 包和 @aster-ui/icons 作为对等依赖:

npm install @aster-ui/icons @tiptap/react @tiptap/starter-kit @tiptap/extension-link @tiptap/extension-placeholder @tiptap/extension-underline

导入

import { RichTextEditor } from 'asterui/editor'

示例

基础编辑器

带有默认工具栏的简单富文本编辑器。

</>

import { RichTextEditor } from 'asterui/editor'

function App() {
  return (
      <RichTextEditor placeholder="Start writing..." />
    )
}

export default App

受控编辑器

带有显示 HTML 输出的受控值的编辑器。

</>

import { RichTextEditor } from 'asterui/editor'
import { useState } from 'react'

function App() {
  const [content, setContent] = useState('<p>Edit this text...</p>')
  
  return (
      <Space direction="vertical" size="md" block>
        <RichTextEditor value={content} onChange={setContent} />
        <Card size="sm" className="bg-base-200">
          <p className="text-sm font-medium mb-2">HTML Output:</p>
          <code className="text-xs break-all">{content}</code>
        </Card>
      </Space>
    )
}

export default App

最小工具栏

仅带有基本格式选项的编辑器。

</>

import { RichTextEditor } from 'asterui/editor'

function App() {
  return (
      <RichTextEditor
        placeholder="Simple formatting only..."
        toolbar={['bold', 'italic', 'underline', '|', 'link']}
      />
    )
}

export default App

完整工具栏

带有所有可用工具栏选项的编辑器。

</>

import { RichTextEditor } from 'asterui/editor'

function App() {
  return (
      <RichTextEditor
        placeholder="All formatting options..."
        toolbar={[
          'bold',
          'italic',
          'underline',
          'strikethrough',
          '|',
          'heading1',
          'heading2',
          'heading3',
          '|',
          'bulletList',
          'orderedList',
          'blockquote',
          '|',
          'code',
          'codeBlock',
          'horizontalRule',
          '|',
          'link',
          '|',
          'undo',
          'redo',
        ]}
      />
    )
}

export default App

无工具栏

无工具栏的无干扰写作。

</>

import { RichTextEditor } from 'asterui/editor'

function App() {
  return (
      <RichTextEditor
        hideToolbar
        placeholder="Write without distractions..."
        minHeight={150}
      />
    )
}

export default App

尺寸

不同的文本大小变体。

</>

import { RichTextEditor } from 'asterui/editor'

function App() {
  return (
      <Space direction="vertical" size="md" block>
        <div>
          <p className="text-sm mb-1">Small</p>
          <RichTextEditor
            size="sm"
            placeholder="Small editor..."
            toolbar={['bold', 'italic', 'link']}
            minHeight={100}
          />
        </div>
        <div>
          <p className="text-sm mb-1">Medium (default)</p>
          <RichTextEditor
            size="md"
            placeholder="Medium editor..."
            toolbar={['bold', 'italic', 'link']}
            minHeight={100}
          />
        </div>
        <div>
          <p className="text-sm mb-1">Large</p>
          <RichTextEditor
            size="lg"
            placeholder="Large editor..."
            toolbar={['bold', 'italic', 'link']}
            minHeight={100}
          />
        </div>
      </Space>
    )
}

export default App

带滚动的最大高度

具有固定最大高度的编辑器,可滚动。

</>

import { RichTextEditor } from 'asterui/editor'

function App() {
  return (
      <RichTextEditor
        placeholder="This editor scrolls when content exceeds max height..."
        minHeight={100}
        maxHeight={200}
        value="<p>Try adding more content to see the scrolling behavior.</p><p>Keep typing...</p><p>More text here...</p><p>And more...</p><p>Even more content...</p><p>The editor will scroll!</p>"
      />
    )
}

export default App

只读模式

显示格式化内容而不编辑。

</>

import { RichTextEditor } from 'asterui/editor'

function App() {
  return (
      <RichTextEditor
        readOnly
        hideToolbar
        value="<h2>Read-Only Content</h2><p>This content <strong>cannot be edited</strong>. It's useful for displaying formatted content without allowing modifications.</p><ul><li>Item one</li><li>Item two</li><li>Item three</li></ul>"
      />
    )
}

export default App

无边框

无边框的编辑器,在卡片内很有用。

</>

import { RichTextEditor } from 'asterui/editor'

function App() {
  return (
      <Card>
        <RichTextEditor
          bordered={false}
          placeholder="Borderless editor inside a card..."
          minHeight={150}
        />
      </Card>
    )
}

export default App

编辑器实例访问

访问 Tiptap 编辑器实例以获得高级功能。

</>

import { RichTextEditor } from 'asterui/editor'
import { useState } from 'react'

function App() {
  const [wordCount, setWordCount] = useState(0)
  
  return (
      <Space direction="vertical" size="sm" block>
        <RichTextEditor
          placeholder="Start typing to see word count..."
          onEditorReady={(editor) => {
            editor.on('update', () => {
              const text = editor.getText()
              const words = text.trim().split(/\s+/).filter(Boolean).length
              setWordCount(words)
            })
          }}
        />
        <p className="text-sm text-base-content/60">Word count: {wordCount}</p>
      </Space>
    )
}

export default App

API

RichTextEditor

属性	描述	类型	默认值
value	HTML 内容(受控)	string	''
onChange	内容更改时的回调	(html: string) => void	-
placeholder	占位符文本	string	'Start typing...'
toolbar	要显示的工具栏项目	ToolbarItem[]	[default set]
hideToolbar	隐藏工具栏	boolean	false
readOnly	使编辑器只读	boolean	false
autoFocus	挂载时自动聚焦	boolean	false
minHeight	编辑器的最小高度	string | number	200
maxHeight	最大高度(启用滚动)	string | number	-
size	文本大小变体	'sm' | 'md' | 'lg'	'md'
bordered	在编辑器周围显示边框	boolean	true
onEditorReady	带有 Tiptap 编辑器实例的回调	(editor: Editor) => void	-

ToolbarItem

属性	描述
bold	粗体文本
italic	斜体文本
underline	下划线文本
strikethrough	删除线文本
code	内联代码
heading1	标题级别 1
heading2	标题级别 2
heading3	标题级别 3
bulletList	无序列表
orderedList	有序列表
blockquote	块引用
codeBlock	代码块
horizontalRule	水平线
link	插入/编辑链接
undo	撤销上次更改
redo	重做上次更改
|	工具栏分隔符