Rich Text Editor

A custom rich text editor similar to Word, built with JavaScript and TypeScript. The content is stored as HTML.

Installation

npm install rich-text-editor

Usage

As a Class

import { RichTextEditor } from "rich-text-editor";

const editor = new RichTextEditor();
const editorElement = editor.getElement();
document.body.appendChild(editorElement);

// Get HTML content
const html = editor.getHTML();

// Set HTML content
editor.setHTML("<p>Hello <strong>world</strong>!</p>");

As a React Component

import React from "react";
import { RichTextEditorComponent } from "rich-text-editor";

const MyEditor = () => {
  const handleChange = (html) => {
    console.log("HTML content:", html);
  };

  return (
    <RichTextEditorComponent
      onChange={handleChange}
      initialValue="<p>Start editing...</p>"
    />
  );
};

Features

• Text Formatting: Bold, Italic, Underline, Strikethrough
• Lists: Bullet and numbered lists
• Alignment: Left, Center, Right, Justify
• Headings: H1, H2, H3, H4
• Media: Insert images and videos (including YouTube embeds)
• Links: Create hyperlinks
• Quotes: Insert formatted blockquotes
• Colors: Text and background colors
• Fonts: Multiple font families and sizes
• Undo/Redo: Full history support
• Fullscreen Mode: Focus writing mode
• HTML Content: Content is stored as HTML

Multilingual Support

The editor supports managing content for multiple languages. Here's how to preserve content when switching between language tabs:

Vanilla JavaScript Example

import { RichTextEditor } from "rich-text-editor";

// Create storage for different languages
const contentStorage = {
  vi: "",
  en: "",
  zh: "",
};
let currentLanguage = "vi";

const editor = new RichTextEditor();
document.body.appendChild(editor.getElement());

// Function to switch language
function switchLanguage(newLang) {
  // Save current content before switching
  contentStorage[currentLanguage] = editor.getHTML();

  // Update current language
  currentLanguage = newLang;

  // Load content for new language
  editor.setHTML(contentStorage[newLang] || "");
}

// Auto-save on input (optional)
const editorDiv = editor.getElement().querySelector(".editor");
editorDiv.addEventListener("input", () => {
  contentStorage[currentLanguage] = editor.getHTML();
});

// Save to localStorage
function saveAll() {
  contentStorage[currentLanguage] = editor.getHTML();
  localStorage.setItem("content-vi", contentStorage.vi);
  localStorage.setItem("content-en", contentStorage.en);
  localStorage.setItem("content-zh", contentStorage.zh);
}

// Load from localStorage
function loadAll() {
  contentStorage.vi = localStorage.getItem("content-vi") || "";
  contentStorage.en = localStorage.getItem("content-en") || "";
  contentStorage.zh = localStorage.getItem("content-zh") || "";
  editor.setHTML(contentStorage[currentLanguage]);
}

React Example

import React, { useState, useEffect, useRef } from "react";
import { RichTextEditor } from "rich-text-editor";

const MultilingualEditor = () => {
  const [currentLang, setCurrentLang] = useState("vi");
  const [content, setContent] = useState({
    vi: "<p>Nội dung tiếng Việt...</p>",
    en: "<p>English content...</p>",
    zh: "<p>中文内容...</p>",
  });

  const editorRef = useRef(null);
  const containerRef = useRef(null);

  useEffect(() => {
    if (!editorRef.current) {
      editorRef.current = new RichTextEditor();
      containerRef.current.appendChild(editorRef.current.getElement());
      editorRef.current.setHTML(content[currentLang]);
    }
  }, []);

  const switchLanguage = (newLang) => {
    // Save current content
    const currentContent = editorRef.current.getHTML();
    setContent((prev) => ({ ...prev, [currentLang]: currentContent }));

    // Switch language
    setCurrentLang(newLang);

    // Load new content
    setTimeout(() => {
      editorRef.current.setHTML(content[newLang] || "");
    }, 0);
  };

  return (
    <div>
      <div>
        <button onClick={() => switchLanguage("vi")}>🇻🇳 Tiếng Việt</button>
        <button onClick={() => switchLanguage("en")}>🇬🇧 English</button>
        <button onClick={() => switchLanguage("zh")}>🇨🇳 中文</button>
      </div>
      <div ref={containerRef} />
    </div>
  );
};

Important Notes for Multilingual Content

1. Always save before switching: Call editor.getHTML() to save the current content before switching languages
2. Images and Videos: All media (images, videos) are preserved in the HTML content
3. Storage Options:
   • Memory: Store in JavaScript object (lost on page refresh)
   • localStorage: Persist data in browser (survives page refresh)
   • Backend: Send to server for permanent storage
4. Auto-save: Use input event listener for automatic saving
5. State Management: In React, use useState or state management libraries (Redux, Zustand, etc.)

For complete examples, see:

• /examples/multilingual-editor.html - Vanilla JavaScript example with full UI
• /examples/react-multilingual-example.tsx - React component with custom hook

API Reference

RichTextEditor Class

Constructor

new RichTextEditor();

Creates a new rich text editor instance.

Methods

getElement(): HTMLElement

Returns the container element of the editor.

const editor = new RichTextEditor();
const element = editor.getElement();
document.body.appendChild(element);

getHTML(): string

Returns the current HTML content of the editor.

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

setHTML(html: string): void

Sets the HTML content of the editor.

editor.setHTML("<h1>Hello World</h1><p>This is a paragraph.</p>");

RichTextEditorComponent (React)

Props

| Prop | Type | Default | Description | | -------------- | ------------------------ | ----------- | ----------------------------------- | | initialValue | string | '' | Initial HTML content | | onChange | (html: string) => void | undefined | Callback fired when content changes | | className | string | undefined | CSS class for the container | | style | React.CSSProperties | undefined | Inline styles for the container |

Usage

import { RichTextEditorComponent } from "rich-text-editor";

function MyComponent() {
  const [content, setContent] = useState("");

  return (
    <RichTextEditorComponent
      initialValue="<p>Start typing...</p>"
      onChange={(html) => setContent(html)}
      className="my-editor"
    />
  );
}

Development

npm run dev  # Start development server
npm run build  # Build for production