Package Exports

elvano-editor
elvano-editor/styles.css

Readme

🎨 Elvano Editor

A modern, feature-rich rich text editor built with TipTap and React. Supports 3 theme modes (Dark, Light, Auto) with complete Arabic/RTL support.

⚡ Quick Start (Plug & Play!)

Just 4 Lines of Code!

<!-- 1. CSS -->
<link rel="stylesheet" href="https://unpkg.com/elvano-editor@latest/dist/elvano-editor.css">

<!-- 2. Container -->
<div id="editor"></div>

<!-- 3. JS (includes React - no dependencies needed!) -->
<script src="https://unpkg.com/elvano-editor@latest/dist/elvano-editor.standalone.min.js"></script>

<!-- 4. Initialize -->
<script>
  ElvanoEditor.render('#editor', {
    theme: 'dark', // Options: 'dark', 'light', 'auto'
    initialContent: '<p>Hello World! 🚀</p>',
    onUpdate: (html) => console.log(html)
  });
</script>

That's it! No React installation, no build tools, no dependencies. Just copy and paste! 🎉

📖 See Complete Simple Usage Guide →
🎨 Theme Guide - Dark, Light, Auto →

✨ Features

🎨 3 Theme Modes - Dark, Light, and Auto (follows system preference)
📝 Complete Rich Text Editing - Bold, italic, underline, strikethrough, headings, lists, and more
🖼️ Advanced Image Editor - Crop, rotate, flip, adjust brightness/contrast/saturation, blur, opacity
📊 Table Support - Insert and manage tables with headers
🎨 Text & Highlight Colors - Full color picker for text and highlights
🔗 Links - Easy link insertion and editing
🌍 Arabic/RTL Support - Automatic RTL detection and proper Arabic text rendering
⌨️ Keyboard Shortcuts - Standard shortcuts (Ctrl+B, Ctrl+I, Ctrl+S, etc.)
📋 Menu Bar - File, Edit, View, Insert, Format, Tools menus
💾 Auto-save - Optional auto-save functionality
📱 Responsive - Works on desktop, tablet, and mobile
🚀 Plug & Play - No dependencies, just include and use!

📦 Installation

Option 1: CDN (Recommended - Easiest!)

<link rel="stylesheet" href="https://unpkg.com/elvano-editor@latest/dist/elvano-editor.css">
<script src="https://unpkg.com/elvano-editor@latest/dist/elvano-editor.standalone.min.js"></script>

File Size: 681 KB (minified) | ~180 KB (gzipped)

Option 2: npm (For React Projects)

npm install elvano-editor

import { RichTextEditor } from 'elvano-editor';
import 'elvano-editor/styles.css';

<RichTextEditor 
  initialContent="<p>Hello</p>"
  onUpdate={(html) => console.log(html)}
/>

🎯 Usage Examples

Plain HTML

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://unpkg.com/elvano-editor@latest/dist/elvano-editor.css">
</head>
<body>
  <div id="editor"></div>

  <script src="https://unpkg.com/elvano-editor@latest/dist/elvano-editor.standalone.min.js"></script>
  <script>
    ElvanoEditor.render('#editor', {
      initialContent: '<p>Start writing...</p>',
      placeholder: 'Type something...',
      onUpdate: (html) => console.log(html)
    });
  </script>
</body>
</html>

Laravel Blade

{{-- In your view --}}
<div id="editor"></div>
<input type="hidden" name="content" id="content-field">

@push('styles')
<link rel="stylesheet" href="https://unpkg.com/elvano-editor@latest/dist/elvano-editor.css">
@endpush

@push('scripts')
<script src="https://unpkg.com/elvano-editor@latest/dist/elvano-editor.standalone.min.js"></script>
<script>
  ElvanoEditor.render('#editor', {
    initialContent: @json($article->content ?? ''),
    onUpdate: (html) => {
      document.getElementById('content-field').value = html;
    }
  });
</script>
@endpush

WordPress

<?php
function add_elvano_editor() {
    ?>
    <link rel="stylesheet" href="https://unpkg.com/elvano-editor@latest/dist/elvano-editor.css">
    
    <div id="editor"></div>
    
    <script src="https://unpkg.com/elvano-editor@latest/dist/elvano-editor.standalone.min.js"></script>
    <script>
      ElvanoEditor.render('#editor', {
        initialContent: '<?php echo esc_js(get_post_meta(get_the_ID(), 'content', true)); ?>',
        onUpdate: (html) => console.log(html)
      });
    </script>
    <?php
}

React / Next.js

'use client'; // For Next.js App Router

import { RichTextEditor } from 'elvano-editor';
import 'elvano-editor/styles.css';

export default function Editor() {
  const [content, setContent] = useState('<p>Hello</p>');

  return (
    <RichTextEditor 
      initialContent={content}
      onUpdate={setContent}
      placeholder="Start writing..."
    />
  );
}

Auto-Initialize

<link rel="stylesheet" href="https://unpkg.com/elvano-editor@latest/dist/elvano-editor.css">

<div 
  data-elvano-editor
  data-initial-content="<p>Hello!</p>"
  data-placeholder="Type here..."
></div>

<script src="https://unpkg.com/elvano-editor@latest/dist/elvano-editor.standalone.min.js"></script>

🔧 API Reference

Options

ElvanoEditor.render('#editor', {
  // Initial HTML content
  initialContent: '<p>Hello</p>',
  
  // Placeholder text
  placeholder: 'Start typing...',
  
  // Called on every change
  onUpdate: (html) => {
    console.log('Content:', html);
  },
  
  // Called when user presses Ctrl+S
  onSave: (html) => {
    console.log('Saving:', html);
  }
});

Methods

// Get editor instance
const editor = ElvanoEditor.render('#editor', options);

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

// Set new content
editor.setContent('<p>New content</p>');

// Destroy editor
editor.unmount();

🎨 Complete Feature List

Text Formatting

Bold (Ctrl+B), Italic (Ctrl+I), Underline (Ctrl+U)
Strikethrough, Code, Code Blocks
Headings (H1, H2, H3)

Lists

Bullet lists, Numbered lists, Task lists (checkboxes)

Alignment

Left, Center, Right, Justify

Colors

Text color picker (12 preset colors + custom)
Highlight color picker

Images

Upload images, Crop with rule-of-thirds grid
Rotate (90°, 180°, 270°), Flip horizontal/vertical
Adjust brightness, contrast, saturation
Opacity control, Blur effect
Resize (percentage or pixels)

Tables

Insert tables, Add/remove rows and columns
Header rows, Resizable columns

Other

Blockquotes, Horizontal rules
Undo/Redo (Ctrl+Z, Ctrl+Y)
Find & Replace (Ctrl+F)
Word count, Preview mode
Export HTML

Arabic/RTL Support

Automatic Arabic text detection
Proper RTL text flow
Arabic fonts (Cairo, Noto Sans Arabic)
Mixed LTR/RTL content support

📚 Documentation

📖 Simple Usage Guide - Plug & play examples
📖 Complete Usage Guide - Detailed examples for all frameworks
📖 Quick Test Guide - How to test locally

🌐 CDN Links

Production (Recommended)

<!-- CSS -->
<link rel="stylesheet" href="https://unpkg.com/elvano-editor@latest/dist/elvano-editor.css">

<!-- JS (Minified - 681 KB) -->
<script src="https://unpkg.com/elvano-editor@latest/dist/elvano-editor.standalone.min.js"></script>

Development

<!-- JS (Full - 1.8 MB with source maps) -->
<script src="https://unpkg.com/elvano-editor@latest/dist/elvano-editor.standalone.js"></script>

Specific Version

<link rel="stylesheet" href="https://unpkg.com/elvano-editor@1.1.1/dist/elvano-editor.css">
<script src="https://unpkg.com/elvano-editor@1.1.1/dist/elvano-editor.standalone.min.js"></script>

💡 Why Elvano Editor?

✅ Truly Plug & Play

No dependencies - React is bundled inside
No build tools - Just include and use
No configuration - Works out of the box

✅ Complete Features

Everything included - MenuBar, Toolbar, ImageEditor, Dialogs
Professional UI - Beautiful dark theme with animations
All features work - Nothing is missing from the full version

✅ Easy Integration

Works everywhere - HTML, Laravel, WordPress, React, Vue, Angular
Simple API - Just 4 lines of code to get started
Auto-initialize - Use data attributes for even simpler setup

✅ Production Ready

Optimized - Minified and gzipped for fast loading
Tested - Works in all modern browsers
Maintained - Regular updates and bug fixes

🐛 Troubleshooting

Editor not showing?

Make sure you're using a local web server (not file://):

# Python
python -m http.server 8000

# Node.js
npx http-server -p 8000

# VS Code
Install "Live Server" extension

Styles look broken?

Ensure CSS is loaded before the editor initializes:

<link rel="stylesheet" href="https://unpkg.com/elvano-editor@latest/dist/elvano-editor.css">

Multiple editors on same page?

Each editor needs a unique ID:

ElvanoEditor.render('#editor1', { placeholder: 'Editor 1' });
ElvanoEditor.render('#editor2', { placeholder: 'Editor 2' });

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

MIT License - feel free to use in personal and commercial projects!

👨‍💻 Author

Ibrahim Mohamed (Elvano)

Email: ibrahimmo989800@gmail.com
GitHub: @your-username

🙏 Acknowledgments

Built with:

TipTap - Headless editor framework
React - UI library (bundled inside)
Lucide Icons - Beautiful icons
Tailwind CSS - Utility-first CSS

Made with ❤️ by Elvano
_{The easiest rich text editor to integrate!}

_{⭐ If you find this useful, please star the repo!}