Text Editor - Examples

Blog / CMS

Blog Post Editor

A full-featured editor for creating blog posts with title, excerpt, and rich content. Includes word count tracking and live preview.

Post Title

Content

Welcome to the RSL Text Editor! This component makes it easy to add rich text editing to your applications.

Here are some key features:

Full keyboard navigation
Screen reader support
Smart paste from Word/Google Docs
Source code view

<div id="blog-editor"
     data-rsl-text-editor
     data-toolbar="full"
     data-placeholder="Write your blog post content here..."
     data-min-height="300px"
     data-show-count="true">
</div>

<script>
// Get the editor instance
var editor = RSL.TextEditor.getInstance('#blog-editor');

// Listen for changes
document.querySelector('#blog-editor').addEventListener('rsl-editor-change', function(e) {
    console.log('Word count:', e.detail.wordCount);
});

// Get content for saving
function saveBlog() {
    var html = editor.getValue();
    var wordCount = editor.getWordCount();
    // Send to your API...
}
</script>

Social / Comments

Comment Editor with Character Limit

A minimal editor for user comments with a 500 character limit. Shows visual feedback as the user approaches the limit.

<div data-rsl-text-editor
     data-toolbar="minimal"
     data-placeholder="Write your comment..."
     data-char-limit="500"
     data-min-height="100px">
</div>

Email / Messaging

Email Composer

A basic toolbar editor for composing emails with essential formatting options.

To

Subject

Message

<div data-rsl-text-editor
     data-toolbar="basic"
     data-placeholder="Compose your email..."
     data-min-height="200px">
</div>

Custom Configuration

Custom Toolbar

Build your own toolbar with only the buttons you need.

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

<!-- Available buttons: -->
<!-- heading, bold, italic, underline, strikethrough -->
<!-- link, image -->
<!-- ul, ol -->
<!-- alignLeft, alignCenter, alignRight -->
<!-- blockquote, code -->
<!-- undo, redo -->
<!-- removeFormat, source -->

Forms / Submissions

Essay Submission with Word Limit

An editor with a word limit for academic submissions or contests. Visual feedback shows progress toward the limit.

Essay Title

Essay (500 words max)

<div data-rsl-text-editor
     data-toolbar="full"
     data-word-limit="500"
     data-min-height="350px"
     data-max-height="500px">
</div>

JavaScript API

Programmatic Control

Control the editor via JavaScript - set content, get values, execute commands.

Output

// Get editor instance
var editor = RSL.TextEditor.getInstance('#api-editor');

// Set content programmatically
editor.setValue('<p>Hello <strong>World</strong>!</p>');

// Get content
var html = editor.getValue();    // HTML
var text = editor.getText();     // Plain text
var words = editor.getWordCount();
var chars = editor.getCharCount();

// Insert HTML at cursor
editor.insertHTML('<hr><p>Inserted content</p>');

// Execute formatting commands
editor.execCommand('bold');
editor.execCommand('italic');

// Toggle source view
editor.toggleSource();

// Focus/blur
editor.focus();
editor.blur();

// Clear
editor.clear();

Text Editor Examples