Rich Text Component

The RichText component provides a full-featured text editor powered by Quill.js. It offers rich text formatting capabilities, form integration, and customizable styling options.

Key Features

Rich Text Editing: Full text formatting capabilities
Quill.js Integration: Industry-standard editor framework
Form Integration: Seamless form compatibility
Accessibility: ARIA support and keyboard navigation

Basic Usage

Create a simple rich text editor:

1
<RichText class="h-48" />

Rich Text Component Props API

RichText Component Props Extends <div> HTMLElement
Prop	Type	Default	Description
label	string		Label text for the editor
subLabel	string		Secondary descriptive text
required	boolean	false	Makes the field required
disabled	boolean	false	Disables the editor
variant	'default' \| 'underline'	default	Visual style variant
wrapperProps	HTMLAttributes <div>		Additional props for the wrapper

Rich Text Functions API

The RichText component exposes the Quill.js instance for programmatic control:

1
const editor = await ready(document.querySelector<RichTextElement>('rich-text'));
2

3
const quill = editor.quill;
4

5
// Set content
6
quill.setText('Hello, World!');
7

8
// Get content
9
const content = quill.getContents();
10

11
// Format text
12
quill.formatText(0, 5, 'bold', true);

Best Practices

Set appropriate content limits
Implement content validation
Handle formatting restrictions
Sanitize user input

Common Use Cases

Content Management Systems

Blog Post Editors

Comment Systems

Documentation Tools

Email Composers

Limited Time Launch Sale

Create professional content editing experiences with our pre-built RichText component. Get the AstroJS starter template now!

GET 60% OFF!

Rating Scroll Progress

Directory