Text Editor - API Reference

Quick Start (2 Minutes)

Add a rich text editor to your page in seconds:

<!-- Include CSS and JS -->
<link rel="stylesheet" href="styles/text-editor.css">
<script src="javascript/text-editor.js"></script>

<!-- Add the editor -->
<div data-rsl-text-editor></div>

Key Features

Full Accessibility

WCAG 2.1 AA compliant with ARIA roles, live regions, and complete keyboard navigation.

Keyboard First

All toolbar buttons navigable via Tab/Arrow keys. Press ? to see keyboard shortcuts overlay.

Smart Paste

Automatically cleans Word/Google Docs formatting while preserving basic styles.

Source View

Toggle between WYSIWYG and HTML source mode for advanced editing.

Character Limits

Optional word/character limits with visual feedback and threshold warnings.

Dark Mode

Full dark mode support that respects system preferences and RSL theme toggle.

Live Demo

Data Attributes

Attribute	Values	Default	Description
`data-rsl-text-editor`	-	-	Required. Marks element as a text editor container.
`data-toolbar`	`full`, `basic`, `minimal`, `custom`	`full`	Toolbar preset configuration.
`data-toolbar-buttons`	Comma-separated list	-	Custom buttons when using `data-toolbar="custom"`.
`data-placeholder`	String	`Start typing...`	Placeholder text shown when editor is empty.
`data-min-height`	CSS value	`200px`	Minimum height of the content area.
`data-max-height`	CSS value	`none`	Maximum height (enables scrolling).
`data-char-limit`	Number	-	Maximum character count.
`data-word-limit`	Number	-	Maximum word count.
`data-show-count`	`true`, `false`	`true`	Show word/character count in status bar.
`data-readonly`	`true`, `false`	`false`	Make editor read-only.
`data-autofocus`	`true`, `false`	`false`	Auto-focus editor on page load.

Toolbar Presets

Preset	Included Buttons
`full`	Headings dropdown, Bold, Italic, Underline, Strikethrough \| Link, Image \| Unordered List, Ordered List \| Align Left, Align Center, Align Right \| Blockquote, Code \| Undo, Redo \| Clear Formatting, Source View
`basic`	Bold, Italic, Underline \| Link \| Unordered List, Ordered List \| Undo, Redo
`minimal`	Bold, Italic \| Link
`custom`	Specify buttons via `data-toolbar-buttons`

Custom Toolbar Example:

<div data-rsl-text-editor
     data-toolbar="custom"
     data-toolbar-buttons="bold,italic,link,image,source"></div>

JavaScript API

Static Methods

Method	Parameters	Description
`RSL.TextEditor.init()`	-	Initialize all text editors on the page.
`RSL.TextEditor.create(element, options)`	Element or selector, options object	Create a new text editor instance.
`RSL.TextEditor.getInstance(element)`	Element or selector	Get existing editor instance.
`RSL.TextEditor.destroy(element)`	Element or selector	Destroy editor and clean up.

Instance Methods

Method	Returns	Description
`getValue()`	String (HTML)	Get the editor content as HTML.
`setValue(html)`	-	Set the editor content.
`getText()`	String	Get plain text content without HTML.
`getWordCount()`	Number	Get current word count.
`getCharCount()`	Number	Get current character count.
`focus()`	-	Focus the editor content area.
`blur()`	-	Remove focus from editor.
`insertHTML(html)`	-	Insert HTML at cursor position.
`clear()`	-	Clear all editor content.
`execCommand(command, value)`	-	Execute a formatting command.
`toggleSource()`	-	Toggle between WYSIWYG and source view.

Events

Event	Detail Properties	Description
`rsl-editor-ready`	`editor`	Fired when editor is initialized and ready.
`rsl-editor-change`	`editor`, `html`, `text`, `wordCount`, `charCount`	Fired when content changes.
`rsl-editor-focus`	`editor`	Fired when editor receives focus.
`rsl-editor-blur`	`editor`	Fired when editor loses focus.
`rsl-editor-command`	`editor`, `command`, `value`	Fired when a formatting command is executed.

document.querySelector('#my-editor').addEventListener('rsl-editor-change', function(e) {
    console.log('Content changed!');
    console.log('HTML:', e.detail.html);
    console.log('Word count:', e.detail.wordCount);
    console.log('Character count:', e.detail.charCount);
});

Keyboard Shortcuts

Tip: Press ? while focused in the editor to show the keyboard shortcuts overlay.

CtrlB

Bold

CtrlI

Italic

CtrlU

Underline

CtrlK

Insert Link

CtrlZ

Undo

CtrlY

Redo

CtrlShiftX

Strikethrough

Ctrl`

Toggle Source

Tab

Navigate toolbar

Escape

Close dialogs

Accessibility

Full keyboard navigation - Tab through toolbar, Enter/Space to activate
Arrow key navigation within button groups
ARIA roles and labels for all interactive elements
Live region announces formatting changes to screen readers
Focus trap in modal dialogs (link, image)
High contrast focus indicators
Reduced motion support via prefers-reduced-motion

Screen Reader Support: The editor uses an ARIA live region to announce formatting changes. When you apply bold, the screen reader will announce "Bold applied" or "Bold removed".

Related Resources

Examples

See the text editor in action with real-world use cases.

View Examples

Playground

Experiment with different configurations interactively.

Open Playground