HtmlEditor

A professional, self-contained HTML Editor widget with real-time preview and theme support. No React or heavy frameworks required. Designed for performance and professional content management.

🚀 Key Features (v2.0.0)

• 🚀 Framework Agnostic: Works anywhere (Vanilla JS, Vue, React, Angular, etc.)
• ⚡ High Performance: Optimized for large documents (10,000+ lines) with zero vertical drift.
• 🎨 Visual Excellence: Permanent Base64 folding keeps your code clean and manageable.
• 🖼️ Smart Image Pipeline: Automatic compression and resizing of pasted images (Base64) to maintain lightweight documents.
• 🌗 Dark Mode: Professional dark/light mode for the editor UI.
• 🛠️ Auto-Format: Built-in HTML formatter that automatically cleans code when exiting preview edit mode.
• 📦 Zero Dependencies: All styles, icons, and logic are bundled into a single file.

Installation

npm install @ngkoaz/html-editor

Usage

1. Modern Bundlers (ESM)

import HtmlEditor from '@ngkoaz/html-editor';

const editor = new HtmlEditor({
  container: '#editor-container',
  initialHtml: '<h1>Hello World</h1>',
  mode: 'split',           // 'code' | 'split' | 'preview'
  theme: 'dark',           // UI theme: 'dark' | 'light' | 'system'
  contentTheme: 'blog',    // Content theme for preview
  imageStrategy: 'base64', // 'base64' | 'cloud' (requires onImageUpload)
  height: '600px',
  onSave: (html) => {
    console.log('Saved HTML:', html);
  },
  onImageUpload: async (file) => {
    // Custom logic to upload image to your server/cloud
    return 'https://cdn.example.com/image.jpg';
  }
});

2. Direct Browser Use (CDN/Script Tag)

Copy dist/html-editor.iife.js to your project:

<div id="editor" style="width: 100%; height: 500px;"></div>

<script src="path/to/html-editor.iife.js"></script>
<script>
  const editor = new HtmlEditor({
    container: '#editor',
    initialHtml: '<p>Welcome!</p>',
    theme: 'light'
  });
</script>

API

Constructor Options

| Option | Type | Default | Description | | --- | --- | --- | --- | | container | string | HTMLElement | Required | Selector or element to mount the editor. | | initialHtml | string | '' | Initial content. | | mode | string | 'split' | Display mode: code, split, preview. | | theme | string | 'dark' | UI theme: dark, light, system. | | contentTheme | string | 'none' | Content theme: none, minimal, corporate, blog, dark-content. | | height | string | '500px' | Editor height. | | onSave | function | null | Callback called with minified HTML when clicking Save. | | onChange | function | null | Callback called on every change. |

Instance Methods

• editor.getHtml(): Returns the current formatted HTML.
• editor.getMinifiedHtml(): Returns the current minified HTML.
• editor.setHtml(html): Updates the editor content.
• editor.setMode(mode): Switches between code, split, and preview.
• editor.setTheme(theme): Updates the UI theme.
• editor.destroy(): Removes the editor and cleans up event listeners.

Development

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

License

MIT