RichTextEditor

Un éditeur WYSIWYG adaptatif au thème basé sur Tiptap pour l’édition de texte riche avec une barre d’outils personnalisable.

Installation

Ce composant nécessite les packages @tiptap et @aster-ui/icons comme dépendances peer :

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

Import

import { RichTextEditor } from 'asterui/editor'

Exemples

Éditeur basique

Éditeur de texte riche simple avec barre d'outils par défaut.

</>

import { RichTextEditor } from 'asterui/editor'

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

export default App

Éditeur contrôlé

Éditeur avec valeur contrôlée affichant la sortie 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

Barre d'outils minimale

Éditeur avec uniquement les options de formatage de base.

</>

import { RichTextEditor } from 'asterui/editor'

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

export default App

Barre d'outils complète

Éditeur avec toutes les options de barre d'outils 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

Sans barre d'outils

Écriture sans distraction sans barre d'outils.

</>

import { RichTextEditor } from 'asterui/editor'

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

export default App

Tailles

Différentes variantes de taille de texte.

</>

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

Hauteur maximale avec défilement

Éditeur avec hauteur maximale fixe qui défile.

</>

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

Mode lecture seule

Afficher le contenu formaté sans édition.

</>

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

Sans bordure

Éditeur sans bordure, utile dans les cartes.

</>

import { RichTextEditor } from 'asterui/editor'

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

export default App

Accès à l'instance de l'éditeur

Accédez à l'instance de l'éditeur Tiptap pour les fonctionnalités avancées.

</>

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

Propriété	Description	Type	Défaut
value	Contenu HTML (contrôlé)	string	''
onChange	Callback lorsque le contenu change	(html: string) => void	-
placeholder	Texte de l’espace réservé	string	'Start typing...'
toolbar	Éléments de barre d’outils à afficher	ToolbarItem[]	[ensemble par défaut]
hideToolbar	Masquer la barre d’outils	boolean	false
readOnly	Rendre l’éditeur en lecture seule	boolean	false
autoFocus	Mise au point automatique au montage	boolean	false
minHeight	Hauteur minimale de l’éditeur	string | number	200
maxHeight	Hauteur maximale (active le défilement)	string | number	-
size	Variante de taille de texte	'sm' | 'md' | 'lg'	'md'
bordered	Afficher la bordure autour de l’éditeur	boolean	true
onEditorReady	Callback avec l’instance de l’éditeur Tiptap	(editor: Editor) => void	-

ToolbarItem

Propriété	Description
bold	Texte en gras
italic	Texte en italique
underline	Texte souligné
strikethrough	Texte barré
code	Code en ligne
heading1	Titre niveau 1
heading2	Titre niveau 2
heading3	Titre niveau 3
bulletList	Liste non ordonnée
orderedList	Liste ordonnée
blockquote	Citation
codeBlock	Bloc de code
horizontalRule	Ligne horizontale
link	Insérer/modifier un lien
undo	Annuler la dernière modification
redo	Rétablir la dernière modification
|	Séparateur de barre d’outils