Getting Started

This guide explains how to initialize rich-html-editor and how editing works at runtime.

How editing works

rich-html-editor uses a click-to-edit candidate model. Supported content elements (paragraphs, headings, spans, divs, etc.) become editable when the user interacts with them.

You do not need to mark elements with special attributes for basic editing to work.

Internally, the editor assigns data-rhe-id attributes to track changes, undo/redo history, and clean HTML snapshots. These attributes are removed during export.

Basic setup

<iframe id="editor"></iframe>
<script src="https://unpkg.com/rich-html-editor@latest"></script>

<script>
  const iframe = document.getElementById("editor");

  iframe.srcdoc = `
    <html>
      <body>
        <h1>Editable title</h1>
        <p>Editable paragraph</p>
      </body>
    </html>
  `;

  iframe.addEventListener("load", () => {
    const editor = new RichHtmlEditor.RichHtmlEditor({ iframe });
    editor.init();
  });
</script>

Optional: strict editing (future)

A future strict-editing mode may require authors to explicitly mark editable regions (e.g. via data-editable).

This is not required in the current version.

Exporting HTML

const html = editor.getHTML();

The returned HTML is sanitized and free of editor-specific artifacts.