rich-html-editor

!TypeScript
!Framework Agnostic
!Bundle Size

> Edit HTML templates safely — without breaking layout or CSS.

rich-html-editor is a lightweight, framework-agnostic HTML editor designed for non-technical users to edit existing HTML templates inside an iframe.
It enables controlled, template-driven editing, not free-form WYSIWYG chaos.

---

🎥 Demo & Playground

$3

👉 https://akshaypatil1.github.io/rich-html-editor/

Use the playground to:

- Edit real HTML inside an iframe
- Apply formatting safely
- Export clean HTML instantly

> No install. No build. Runs directly in the browser.

---

$3

Below is a short demo showing how rich-html-editor allows inline editing of an HTML template using a toolbar embedded inside an iframe.

!rich-html-editor demo

> The user edits text, formatting, and styles directly inside the iframe while preserving the original template structure.

---

✨ Why rich-html-editor?

Most rich text editors allow users to edit _anything_ — which often leads to broken layouts, styles, or invalid HTML.

rich-html-editor is different:

- 🧩 Built for template-driven HTML
- 🔒 Runs inside an iframe (style & DOM isolation)
- 🛠️ Focused on safe, controlled editing
- 👩‍💼 Ideal for non-technical users
- ⚙️ Framework-agnostic (React, Angular, Vue, Vanilla JS)

---

Documentation

Explore guides, concepts, API reference, and examples:

👉 https://akshaypatil1.github.io/rich-html-editor/docs/

---

🚀 Features

$3

- Bold
- Italic
- Underline
- Strikethrough
- Font family
- Font size
- Headings (H1–H6)
- Ordered & unordered lists
- Links
- Clear formatting (🧹) — removes editor-applied styles within the current session

$3

- Text color
- Text highlighter
- Alignment

$3

- Click-to-edit images: click an image inside the editor to open a modal that lets the user upload a local image (image/\*, ≤ 1 MB) which will be embedded as a base64 data URL, or provide an http(s) image URL to apply. Image changes are recorded in the editor undo/redo history.

$3

- Undo / Redo
- Format state tracking
- History stack (configurable)
- Clean HTML extraction

$3

- Iframe-based isolation
- Injectable toolbar
- Event-driven updates
- Framework-agnostic core
- TypeScript-first API

---

📦 Installation

``bash
npm install rich-html-editor

or

yarn add rich-html-editor
`

---

Quick Start (Browser / iframe)

The editor initializes on an HTMLIFrameElement.

> ⚠️ The iframe must be same-origin. Use srcdoc for safety.

`html






`

---

📦 Module Usage

$3

`js
import { initRichEditor, getCleanHTML } from "rich-html-editor";
`

$3

`js
const { initRichEditor, getCleanHTML } = require("rich-html-editor");
`

---

🧩 Framework Integrations

$3

`jsx
import React, { useRef, useEffect } from "react";
import { initRichEditor, editorEventEmitter } from "rich-html-editor";

export default function RichEditor() {
const iframeRef = useRef(null);

useEffect(() => {
const iframe = iframeRef.current;
iframe.srcdoc =
"

Edit me

";

initRichEditor(iframe);

const off = editorEventEmitter.on("contentChanged", () => {});
return () => off();
}, []);

return ,
})
export class RichEditorComponent implements AfterViewInit, OnDestroy {
@ViewChild("editorIframe", { static: true })
iframeRef!: ElementRef;
private off?: () => void;

ngAfterViewInit() {
const iframe = this.iframeRef.nativeElement;
iframe.srcdoc =
"

Edit me

";
initRichEditor(iframe);
this.off = editorEventEmitter.on("contentChanged", () => {
/ react to changes /
});
}

ngOnDestroy() {
this.off?.();
}
}
`

---

$3

`vue



``

---

🧠 Public API

$3

Initializes the editor inside the provided iframe.

$3

Returns sanitized HTML:

- Toolbar removed
- Editor-specific attributes stripped
- Safe for storage or approval workflows

---

🛣️ Roadmap

- Background color / image
- Table editor
- Video embedding (≤ 1MB)
- Superscript / subscript
- Editable-region locking

---

🤝 Contributing

Contributions are welcome!

👉 https://github.com/akshaypatil1/rich-html-editor

---

📄 License

MIT

---

⭐ If this helps you, consider starring the repo