RoosterRichTextEditor

RoosterRichTextEditor is a rich-text editor built on Microsoft's RoosterJS. It's controlled — you hold the HTML value and update it from onChange. The toolbar is configurable, and it supports a compact layout, a placeholder, and fixed row height.

When to use

• Capture formatted content (notes, descriptions, comments) as HTML.
• Anywhere you'd otherwise embed a heavyweight editor but want SpartanFX theming.

Import

import { RoosterRichTextEditor } from '@spartanfx/react';

Basic usage

value and onChange are required.

function Notes() {
  const [html, setHtml] = React.useState('<p>Start typing…</p>');
  return (
    <RoosterRichTextEditor
      value={html}
      onChange={setHtml}
      placeholder="Add a note"
      rows={6}
    />
  );
}

Compact toolbar and limited controls

Use compact for a tighter layout, and allowedControls to restrict which toolbar buttons appear.

<RoosterRichTextEditor
  value={html}
  onChange={setHtml}
  compact
  allowedControls={{ bold: true, italic: true, bulletedList: true }}
/>

Key props

Prop	Type	Notes
value (required)	string	Editor HTML (controlled).
onChange (required)	(content) => void	Fires with updated HTML.
allowedControls	IAllowedControls	Which toolbar controls to show.
compact	boolean	Tighter toolbar/layout.
rows	number	Fixed editor height in rows.
placeholder	string	Empty-state text.
disabled	boolean	Read-only mode.
onBlur	() => void	Fires when the editor loses focus.

See the full generated reference: RoosterRichTextEditor API ↗ and IRoosterRichTextEditorProps.

See also

• Components overview