Wordeen

A modern, standalone WYSIWYG editor with embedded CSS, built with TypeScript. Zero dependencies, fully customizable, and ready to use in any web application.

Features

• 🎨 Rich Text Editing - Full WYSIWYG editing capabilities
• 🎯 Zero Dependencies - No external libraries required
• 📱 Responsive Design - Works on desktop and mobile
• 🌙 Theme Support - Light and dark themes included
• 🔧 Highly Customizable - Extensive configuration options
• ♿ Accessibility - Built with accessibility in mind
• 📝 TypeScript - Full TypeScript support with declarations
• 🎨 Embedded CSS - All styles are self-contained

Installation

npm install wordeen

Quick Start

ES Modules

import Wordeen from 'wordeen';

// Initialize the editor
const editor = new Wordeen('#editor', {
  placeholder: 'Start typing...',
  theme: 'light',
  toolbar: true
});

UMD (Browser)

<script src="node_modules/wordeen/dist/wordeen.umd.js"></script>
<script>
  const editor = new Wordeen('#editor', {
    placeholder: 'Start typing...',
    theme: 'light',
    toolbar: true
  });
</script>

Basic Usage

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

// Set HTML content
editor.setHTML('<p>Hello World!</p>');

// Get plain text
const text = editor.getText();

// Set plain text
editor.setText('Hello World!');

// Focus the editor
editor.focus();

// Destroy the editor
editor.destroy();

Configuration Options

const editor = new Wordeen('#editor', {
  // Basic options
  placeholder: 'Start typing...',
  theme: 'light', // 'light' or 'dark'
  height: '300px',
  
  // Toolbar options
  toolbar: true,
  toolbarGroups: [
    {
      label: 'Formatting',
      items: [
        { command: 'bold', icon: 'bold', title: 'Bold' },
        { command: 'italic', icon: 'italic', title: 'Italic' },
        { command: 'underline', icon: 'underline', title: 'Underline' }
      ]
    }
  ],
  
  // Advanced options
  autosave: true,
  autosaveKey: 'wordeen-content',
  maxUndoSteps: 50,
  enableKeyboardShortcuts: true,
  enableAccessibility: true,
  enableResponsive: true,
  wordCount: true,
  characterCount: true
});

API Reference

Methods

• getHTML() - Get the HTML content
• setHTML(html) - Set the HTML content
• getText() - Get the plain text content
• setText(text) - Set the plain text content
• focus() - Focus the editor
• blur() - Remove focus from the editor
• destroy() - Destroy the editor instance
• undo() - Undo the last action
• redo() - Redo the last undone action
• saveState() - Save current state for undo/redo

Events

// Listen to events
editor.on('contentChanged', (content) => {
  console.log('Content changed:', content);
});

editor.on('focus', () => {
  console.log('Editor focused');
});

editor.on('blur', () => {
  console.log('Editor blurred');
});

Styling

Wordeen comes with built-in styles, but you can customize them:

const editor = new Wordeen('#editor', {
  customCSS: `
    .wordeen-editor {
      border: 2px solid #007bff;
      border-radius: 8px;
    }
  `
});

Browser Support

• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+

License

MIT License - see LICENSE file for details.

Contributing

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

Changelog

0.1.0-beta.1

• Initial beta release
• Core WYSIWYG functionality
• Theme support
• Toolbar customization
• TypeScript declarations