rich-html-editor
Safe, template-driven HTML editing

Framework Guides

This guide shows how to integrate rich-html-editor safely in popular frameworks.

The key rule across all frameworks: initialize the editor only after the iframe has loaded.

React

import { useEffect, useRef } from "react";
import { RichHtmlEditor } from "rich-html-editor";

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

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

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

    const onLoad = () => {
      const editor = new RichHtmlEditor({
        iframe,
      });
      editor.init();
    };

    iframe.addEventListener("load", onLoad);
    return () => iframe.removeEventListener("load", onLoad);
  }, []);

  return <iframe ref={iframeRef} title="Editor" />;
}

Angular

import {
  Component,
  ViewChild,
  ElementRef,
  AfterViewInit,
} from "@angular/core";
import { RichHtmlEditor } from "rich-html-editor";

@Component({
  selector: "app-editor",
  template: "<iframe #frame></iframe>",
})
export class EditorComponent implements AfterViewInit {
  @ViewChild("frame") iframeRef!: ElementRef;

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

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

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

Vue

<template>
  <iframe ref="iframe"></iframe>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { RichHtmlEditor } from "rich-html-editor";

const iframe = ref(null);

onMounted(() => {
    iframe.value.srcdoc = `
    <html>
      <body>
        <div>Editable</div>
      </body>
    </html>
  `;

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

Vanilla JavaScript

const iframe = document.querySelector("iframe");

        iframe.srcdoc = `
          <html>
            <body>
              <span>Editable</span>
            </body>
          </html>
        `;

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

Lifecycle summary

Next steps