Getting Started

Add a full-featured rich text editor to your website in under 30 seconds.

RTE is a single JavaScript file with no dependencies. It injects its own CSS, creates the toolbar, editor area, export bar, and status bar — all from one <script> tag.

Installation

Option 1: Direct Download

Download rte.js and include it in your project:

<script src="rte.js"></script>

Option 2: npm

npm install rte-rich-text-editor

Then use it in your project:

// CommonJS
const RTE = require('rte-rich-text-editor');

// ES Modules
import RTE from 'rte-rich-text-editor';

Option 3: CDN (unpkg / jsdelivr)

<script src="https://unpkg.com/rte-rich-text-editor/rte.js"></script>

Option 4: Self-hosted

Place rte.js in your static assets directory and reference it with a relative or absolute path.

Basic Usage

<!-- 1. Create a container -->
<div id="editor"></div>

<!-- 2. Include the script -->
<script src="rte.js"></script>

<!-- 3. Initialize -->
<script>
  const editor = RTE.init('#editor');
</script>

You can also pass a DOM element directly:

const el = document.getElementById('my-editor');
const editor = RTE.init(el);

Configuration

Pass an options object as the second argument to RTE.init():

const editor = RTE.init('#editor', {
  placeholder: 'Write your story...',  // Custom placeholder text
  height: '400px',                     // Minimum editor height
});

Toolbar Reference

The toolbar is organized into logical groups separated by dividers:

Keyboard Shortcuts

On macOS, use Cmd instead of Ctrl.

Media (Images, Video, Audio)

Each media type can be inserted in three ways:

1. URL: Click the toolbar button, paste a URL, and click Insert.
2. File upload: Click "Choose File" in the popup to browse your computer.
3. Drag & Drop: Drag image, video, or audio files directly into the editor.

Additionally, you can paste images from your clipboard (e.g., screenshots) and they'll be embedded automatically.

Colors & Highlighting

Both the text color and highlight pickers offer:

• 40 preset swatches arranged in a grid (hover to see the hex value)
• Custom input — type any CSS color value: hex (#ff6600), named (tomato), rgb, etc.

Select text first, then pick a color. The color is applied to the selection immediately.

Tables

Click the 📊 table button to open the visual grid selector. Hover over the grid to choose dimensions (up to 6×6), then click to insert.

Tables are inserted with:

• A header row (bold, gray background)
• Borders and padding
• Full-width layout

After insertion, click inside any cell to edit its content. Standard text formatting works inside table cells.

Saving & Exporting

The built-in export bar at the bottom of the editor provides one-click access to:

You can also use Ctrl+S to quickly save an HTML file.

Backend Integration

RTE provides a full JavaScript API to extract content for saving to your backend. See the API Reference for complete details.

Saving to a Server

// Get content and POST to your API
document.getElementById('save-btn').addEventListener('click', async () => {
  const response = await fetch('/api/documents', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(editor.getJSON())
  });
});

Loading Existing Content

// Load saved HTML into the editor
const response = await fetch('/api/documents/123');
const data = await response.json();
editor.setHTML(data.html);

Listening for Changes

// Auto-save on every change
editor.onChange = (data) => {
  console.log(data.words, 'words');
  console.log(data.chars, 'characters');
  // debounce and save...
};

Security

RTE outputs raw HTML. If your application allows untrusted users to create or edit content, you must sanitize the output server-side before storing or rendering it to other users.

Sanitize Before Storing or Rendering

Use a proven HTML sanitizer such as DOMPurify (client-side) or sanitize-html (server-side):

// Server-side (Node.js)
const sanitizeHtml = require('sanitize-html');
const clean = sanitizeHtml(editor.getHTML(), {
  allowedTags: sanitizeHtml.defaults.allowedTags.concat(['img', 'h1', 'h2']),
  allowedAttributes: { ...sanitizeHtml.defaults.allowedAttributes, img: ['src', 'alt'] },
});

// Client-side
const clean = DOMPurify.sanitize(editor.getHTML());

Disallow Dangerous Patterns

Your sanitizer should strip or reject:

• javascript: links (e.g. <a href="javascript:...">)
• Inline event handlers (onclick, onerror, onload, etc.)
• <script>, <iframe>, <object>, <embed>, and <form> tags
• data: URIs in links (except for embedded images if intended)

Keep API Keys Server-Side

Never ship API keys in client-side code. Use the aiProxy option to route AI requests through your own server, which keeps the key secret. See the Pro documentation for details.

Custom Styling

RTE uses CSS custom properties (variables) on the .rte-wrap element. Override them to match your brand:

.rte-wrap {
  --rte-radius: 10px;      /* Border radius */
  --rte-border: #d0d5dd;   /* Border color */
  --rte-bg: #ffffff;        /* Background */
  --rte-toolbar-bg: #f8f9fb;/* Toolbar background */
  --rte-hover: #e8ecf1;    /* Button hover */
  --rte-active: #d4dae3;   /* Button active */
  --rte-accent: #6366f1;   /* Accent / brand color */
  --rte-shadow: 0 2px 12px rgba(0,0,0,.08);
  --rte-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

For example, to make the editor match a dark theme:

.rte-wrap {
  --rte-bg: #1a1a2e;
  --rte-toolbar-bg: #16213e;
  --rte-border: #334155;
  --rte-hover: #1e3a5f;
  --rte-active: #0f3460;
  --rte-accent: #e94560;
  --rte-shadow: 0 2px 12px rgba(0,0,0,.3);
}
.rte-content { color: #e2e8f0; }
.rte-btn { color: #cbd5e1; }