Editora - Webcomponent Demo

1️⃣ Basic Usage (TinyMCE-Style)

Simple drop-in replacement with zero configuration:

<!-- Core Bundle (~56KB) - Recommended -->
<script src="dist/webcomponent-core.min.js"></script>

<!-- Full Bundle (~60KB + lazy chunks) - All plugins -->
<!-- <script src="dist/webcomponent.min.js"></script> -->

<editora-editor height="400">
  <p>Start typing...</p>
</editora-editor>

Welcome to Editora!

This is a framework-agnostic rich text editor with 39 native plugins.

Try these features:

Bold, italic, underline formatting
Headings and block quotes
Lists (ordered and unordered)
Text colors and highlighting
Links, images, and tables

Click "Get Content" to see HTML...

2️⃣ Custom Configuration

Configure via attributes or JavaScript API:

<rich-text-editor
  height="300"
  theme="dark"
  placeholder="Start writing..."
  toolbar="undo redo | bold italic | link image"
  plugins="bold italic underline link image"
></rich-text-editor>

3️⃣ JavaScript API (TinyMCE-Style)

Programmatic control via the Editora global object:

// Get editor API
const editor = document.querySelector('#editor3').getAPI();

// Or use TinyMCE-style init
const editor = Editora.init('#editor3', {
  height: 400,
  plugins: 'bold italic link'
});

Content controlled via JavaScript API

API logs will appear here...

4️⃣ Multiple Editors on One Page

Run multiple independent editor instances:

Editor A

Editor A content

Editor B

Editor B content

Comparison results will appear here...

✨ Features

🚀 Framework Agnostic

Works with React, Vue, Angular, Svelte, or vanilla JS

📦 Lightweight

97 KB minified, 24 KB gzipped - 91% smaller than before!

🔌 39 Native Plugins

All plugins are native TypeScript with zero React deps

🎨 Customizable

Custom themes, toolbars, and plugin configurations

♿ Accessible

ARIA-compliant with keyboard navigation support

🌐 Web Component

Standard custom element with declarative API

🔌 Available Plugins (39 Total)

Loading plugins...

🎉 Editora Web Component - Production Ready!