Default Editor

The simplest setup — just RTE.init('#el') with no options.

const editor = RTE.init('#ex-default');

2

Custom Placeholder & Height

Configure placeholder text and minimum height.

const editor = RTE.init('#ex-custom', {
  placeholder: 'Write your blog post here...',
  height: '350px'
});

3

Live Preview with onChange

The preview panel below updates in real-time as you type.

Live Preview 0 words

Start typing to see a live preview...

const editor = RTE.init('#ex-preview');
editor.onChange = (data) => {
  document.getElementById('preview').innerHTML = data.html;
  document.getElementById('stats').textContent = data.words + ' words';
};

4

Programmatic API Control

Use the API methods to control the editor from external buttons.

Click "Get JSON" above to see the output here...

5

Dark Theme (CSS Variables)

Override CSS custom properties to create a dark-themed editor.

#dark-editor .rte-wrap {
  --rte-bg: #1a1a2e;
  --rte-toolbar-bg: #16213e;
  --rte-border: #334155;
  --rte-hover: #1e3a5f;
  --rte-active: #0f3460;
  --rte-accent: #e94560;
}
#dark-editor .rte-content { color: #e2e8f0; }
#dark-editor .rte-btn { color: #cbd5e1; }

6

Form Integration

Sync editor content to a hidden input for standard form submission.

Submit the form to see the data here...

// Sync editor to hidden input on change
editor.onChange = (data) => {
  document.getElementById('hidden-input').value = data.html;
};

// Or grab it on submit
form.addEventListener('submit', (e) => {
  const html = editor.getHTML();
  // send to server...
});

7

Custom Export Styling (exportCSS)

Use exportCSS to append custom styles to the exported HTML. Click "Download HTML" in the export bar to see the styled output.

const editor = RTE.init('#editor', {
  exportCSS: `
    body { background: #1e293b; color: #e2e8f0; max-width: 100%; }
    h1, h2, h3 { color: #a78bfa; }
    a { color: #818cf8; }
    blockquote { background: #334155; border-color: #6366f1; }
  `
});

8

Full Export Template (exportTemplate)

Use exportTemplate for complete control over the exported HTML. Place {{content}} where the editor content should go.

const editor = RTE.init('#editor', {
  exportTemplate: `<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    body { background: #0f172a; color: #e2e8f0; padding: 40px; }
    .content { max-width: 900px; margin: 0 auto; }
    h1, h2, h3 { color: #a78bfa; }
    a { color: #818cf8; }
    img { max-width: 100%; border-radius: 8px; }
  </style>
</head>
<body>
  <div class="content">\{{content}}</div>
</body>
</html>`
});

Live Examples