Rich Text Editor

Rich Text Editor

Provides an interface for creating and editing formatted text.

Docs API Reference

Installation

pnpm dlx shadcn@latest add https://ui.booleanfields.com/r/rich-text-editor.json

Usage

import { 
  RichTextEditor, 
  RichTextEditorContent,
  RichTextEditorToolbar 
} from "@/components/ui/rich-text-editor"

<RichTextEditor
  value={content}
  onChange={setContent}
  // autofocus={'start'}
  // or pass any other editor settings
  // https://tiptap.dev/docs/editor/api/editor#settings
  // editorProps={{
  //  handleKeyDown: () => {}
  // }}
>
  <RichTextEditorToolbar />
  <RichTextEditorContent />
</RichTextEditor>

Examples

Default

Disabled

Form

Toolbar position