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

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

Configure placeholder text and minimum height.

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

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

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

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

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

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

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