Browser Usage

This guide explains how to use rich-html-editor directly in the browser without any bundler or framework.

Browser usage is ideal for:

Static sites
GitHub Pages
Internal tools
Proof-of-concept demos

Loading the editor via CDN

The editor can be loaded directly from a CDN using unpkg.

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

This exposes the editor under a global namespace:

window.RichHtmlEditor

The main editor class is available as:

RichHtmlEditor.RichHtmlEditor

Basic HTML example

<iframe id="editorFrame"></iframe>

<script src="https://unpkg.com/rich-html-editor@latest"></script>
<script>
  const iframe = document.getElementById("editorFrame");

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

  iframe.addEventListener("load", () => {
    const editor = new RichHtmlEditor.RichHtmlEditor({
      iframe: iframe,
    });

    editor.init();
  });
</script>

Initializing the editor before the iframe load event will prevent the editor from working.

Using srcdoc vs src

You should strongly prefer iframe.srcdoc when working in the browser.

✔ Same-origin by default
✔ Safer for templates
✔ No network dependency

Loading external URLs into an iframe may violate same-origin rules and prevent the editor from initializing.

Exporting HTML

After editing, you can extract clean HTML:

const html = editor.getHTML();
console.log(html);

The returned HTML:

Contains only your template content
Removes editor-specific attributes
Is safe to store or deploy

Common mistakes

❌ Initializing before iframe load
❌ Using cross-origin iframe URLs
❌ Making entire document editable
❌ Treating the editor as a page builder

Next steps

Framework Guides — React, Angular, Vue
API Reference Changelog — configuration options
Security & Safety — sandboxing & sanitization