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@1.0.0/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...
};

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; }