RichTextEditor

Un editor WYSIWYG con soporte de temas construido en Tiptap para edición de texto enriquecido con barra de herramientas personalizable.

Instalación

Este componente requiere paquetes @tiptap y @aster-ui/icons como dependencias de pares:

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

Importar

import { RichTextEditor } from 'asterui/editor'

Ejemplos

Editor básico

Editor de texto enriquecido simple con barra de herramientas predeterminada.

</>

import { RichTextEditor } from 'asterui/editor'

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

export default App

Editor controlado

Editor con valor controlado mostrando salida 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

Barra de herramientas mínima

Editor con solo opciones básicas de formato.

</>

import { RichTextEditor } from 'asterui/editor'

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

export default App

Barra de herramientas completa

Editor con todas las opciones de barra de herramientas disponibles.

</>

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

Sin barra de herramientas

Escritura sin distracciones sin barra de herramientas.

</>

import { RichTextEditor } from 'asterui/editor'

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

export default App

Tamaños

Diferentes variantes de tamaño de texto.

</>

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

Altura máxima con scroll

Editor con altura máxima fija que hace scroll.

</>

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

Modo solo lectura

Muestra contenido formateado sin edición.

</>

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

Sin borde

Editor sin borde, útil dentro de tarjetas.

</>

import { RichTextEditor } from 'asterui/editor'

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

export default App

Acceso a instancia del editor

Accede a la instancia del editor Tiptap para características avanzadas.

</>

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

Propiedad	Descripción	Tipo	Predeterminado
value	Contenido HTML (controlado)	string	''
onChange	Callback cuando cambia el contenido	(html: string) => void	-
placeholder	Texto de marcador de posición	string	'Start typing...'
toolbar	Elementos de barra de herramientas a mostrar	ToolbarItem[]	[conjunto predeterminado]
hideToolbar	Ocultar la barra de herramientas	boolean	false
readOnly	Hacer el editor solo lectura	boolean	false
autoFocus	Auto-enfocar al montar	boolean	false
minHeight	Altura mínima del editor	string | number	200
maxHeight	Altura máxima (habilita scroll)	string | number	-
size	Variante de tamaño de texto	'sm' | 'md' | 'lg'	'md'
bordered	Mostrar borde alrededor del editor	boolean	true
onEditorReady	Callback con instancia del editor Tiptap	(editor: Editor) => void	-

ToolbarItem

Propiedad	Descripción
bold	Texto en negrita
italic	Texto en cursiva
underline	Texto subrayado
strikethrough	Texto tachado
code	Código en línea
heading1	Encabezado nivel 1
heading2	Encabezado nivel 2
heading3	Encabezado nivel 3
bulletList	Lista desordenada
orderedList	Lista ordenada
blockquote	Cita en bloque
codeBlock	Bloque de código
horizontalRule	Línea horizontal
link	Insertar/editar enlace
undo	Deshacer último cambio
redo	Rehacer último cambio
|	Divisor de barra de herramientas