custom-wysiwyg-editor

v0.0.2

Published

a month ago

A custom WYSIWYG editor

Downloads

0High
0Medium
0Low

tarun1.6

wysiwyg editor rich-text text-editor

Custom WYSIWYG Editor

A lightweight, customizable WYSIWYG (What You See Is What You Get) rich text editor built with TypeScript. Perfect for blog posts, legal documents, content management systems, and any application requiring rich text editing.

Features

Text Formatting

Bold, Italic, Underline, ~~Strikethrough~~
Subscript and Superscript
Text color and background highlight color
Clear formatting

Typography

Font family selection (Arial, Georgia, Times New Roman, Courier New, Verdana, etc.)
Font size selection (7 sizes)
Headings (H1-H6) and Paragraph

Layout & Structure

Text alignment (Left, Center, Right, Justify)
Ordered and unordered lists
Indent and outdent
Blockquotes
Horizontal rules
Tables with customizable rows and columns

Media & Links

Insert and remove hyperlinks
Insert images via URL

Productivity

Find & Replace with keyboard shortcut (Ctrl+F)
Undo/Redo
Code blocks
Word and character count
Spell check indicator

Developer Experience

Written in TypeScript with full type definitions
Zero dependencies
ESM and CommonJS support
Customizable options
Event callbacks

Installation

npm install custom-wysiwyg-editor

Or with yarn:

yarn add custom-wysiwyg-editor

Quick Start

ES Modules

import { createEditor } from 'custom-wysiwyg-editor';

const editor = createEditor({
  container: '#editor-container',
  placeholder: 'Start typing...',
  onChange: (content) => {
    console.log('Content changed:', content);
  }
});

CommonJS

const { createEditor } = require('custom-wysiwyg-editor');

const editor = createEditor({
  container: document.getElementById('editor-container'),
  placeholder: 'Start typing...'
});

HTML

<!DOCTYPE html>
<html>
<head>
  <title>My Editor</title>
</head>
<body>
  <div id="editor-container"></div>

  <script type="module">
    import { createEditor } from 'custom-wysiwyg-editor';
    
    const editor = createEditor({
      container: '#editor-container',
      placeholder: 'Write your content here...'
    });
  </script>
</body>
</html>

Configuration Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | container | string \| HTMLElement | required | CSS selector or DOM element for the editor | | initialContent | string | '' | Initial HTML content | | placeholder | string | '' | Placeholder text when editor is empty | | readOnly | boolean | false | Make the editor read-only | | onChange | (content: string) => void | undefined | Callback fired when content changes | | fontFamilies | string[] | See below | Available font families | | fontSizes | string[] | ['1'-'7'] | Available font sizes |

Default Font Families

[
  'Arial',
  'Georgia',
  'Times New Roman',
  'Courier New',
  'Verdana',
  'Trebuchet MS',
  'Comic Sans MS',
  'Impact'
]

API Reference

`createEditor(options: EditorOptions): EditorInstance`

Creates a new editor instance.

EditorInstance Methods

`getContent(): string`

Returns the current HTML content of the editor.

const html = editor.getContent();
console.log(html); // '<p>Hello <strong>world</strong></p>'

`setContent(content: string): void`

Sets the HTML content of the editor.

editor.setContent('<h1>Welcome</h1><p>Start editing...</p>');

`focus(): void`

Focuses the editor.

editor.focus();

`blur(): void`

Removes focus from the editor.

editor.blur();

`isEmpty(): boolean`

Returns true if the editor has no text content.

if (editor.isEmpty()) {
  alert('Please enter some content');
}

`destroy(): void`

Removes the editor from the DOM and cleans up.

editor.destroy();

`execCommand(command: string, value?: string): void`

Executes a document command on the editor.

editor.execCommand('bold');
editor.execCommand('foreColor', '#ff0000');

`openFindReplace(): void`

Opens the Find & Replace dialog.

editor.openFindReplace();

`insertTable(rows: number, cols: number): void`

Inserts a table with the specified dimensions.

editor.insertTable(3, 4); // 3 rows, 4 columns

Keyboard Shortcuts

| Shortcut | Action | |----------|--------| | Ctrl+B | Bold | | Ctrl+I | Italic | | Ctrl+U | Underline | | Ctrl+Z | Undo | | Ctrl+Y | Redo | | Ctrl+F | Find & Replace | | Esc | Close dialogs |

Toolbar Buttons

The editor includes a comprehensive toolbar with the following buttons:

| Icon | Action | Description | |------|--------|-------------| | ↶ | Undo | Undo last action | | ↷ | Redo | Redo last undone action | | B | Bold | Toggle bold text | | I | Italic | Toggle italic text | | U | Underline | Toggle underline | | ~~S~~ | Strikethrough | Toggle strikethrough | | X₂ | Subscript | Toggle subscript | | X² | Superscript | Toggle superscript | | ☰ | Align Left | Align text left | | ☰ | Align Center | Center text | | ☰ | Align Right | Align text right | | ☰ | Justify | Justify text | | • | Bullet List | Insert unordered list | | 1. | Numbered List | Insert ordered list | | → | Indent | Increase indent | | ← | Outdent | Decrease indent | | 🔗 | Link | Insert hyperlink | | 🔗̸ | Unlink | Remove hyperlink | | 🖼 | Image | Insert image | | ▦ | Table | Insert table | | ― | Horizontal Line | Insert horizontal rule | | ⌫ | Clear Format | Remove all formatting | | </> | Code | Insert code block | | " | Quote | Insert blockquote | | 🔍 | Find & Replace | Open find & replace dialog |

Styling

The editor comes with default styles, but you can customize its appearance by targeting these CSS classes:

/* Main container */
.wysiwyg-container { }

/* Toolbar */
.wysiwyg-toolbar { }
.wysiwyg-toolbar button { }
.wysiwyg-toolbar select { }

/* Editor area */
.wysiwyg-editor { }

/* Status bar */
.wysiwyg-statusbar { }

/* Tables */
.wysiwyg-editor table { }
.wysiwyg-editor td, .wysiwyg-editor th { }

/* Blockquotes */
.wysiwyg-editor blockquote { }

/* Code blocks */
.wysiwyg-editor pre { }

/* Find & Replace dialog */
.wysiwyg-find-replace { }

/* Table dialog */
.wysiwyg-table-dialog { }

Examples

Blog Post Editor

const editor = createEditor({
  container: '#blog-editor',
  placeholder: 'Write your blog post...',
  initialContent: '<h1>My Blog Post</h1>',
  onChange: (content) => {
    // Auto-save to server
    saveDraft(content);
  }
});

// Get content on form submit
document.querySelector('form').addEventListener('submit', (e) => {
  e.preventDefault();
  const content = editor.getContent();
  publishPost(content);
});

Legal Document Editor

const editor = createEditor({
  container: '#legal-editor',
  placeholder: 'Enter document content...',
  fontFamilies: ['Times New Roman', 'Arial', 'Courier New'],
  onChange: (content) => {
    updatePreview(content);
  }
});

// Insert a standard table
document.getElementById('insert-terms-table').addEventListener('click', () => {
  editor.insertTable(5, 3);
});

Read-Only Viewer

const viewer = createEditor({
  container: '#document-viewer',
  initialContent: documentHTML,
  readOnly: true
});

Browser Support

Chrome (latest)
Firefox (latest)
Safari (latest)
Edge (latest)

TypeScript Support

Full TypeScript definitions are included:

import { createEditor, EditorOptions, EditorInstance } from 'custom-wysiwyg-editor';

const options: EditorOptions = {
  container: '#editor',
  placeholder: 'Type here...',
  onChange: (content: string) => {
    console.log(content);
  }
};

const editor: EditorInstance = createEditor(options);

Contributing

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

Fork the repository
Create your feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add some amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

Development

# Install dependencies
npm install

# Build the package
npm run build

# Watch mode for development
npm run dev

# Start demo server
npm run serve

License

This project is licensed under the MIT License - see the LICENSE file for details.

Author

Tarun P

Changelog

v0.0.1

Initial release
Basic text formatting (bold, italic, underline, strikethrough)
Font family and size selection
Headings (H1-H6)
Text and background colors
Lists (ordered/unordered)
Text alignment
Links and images
Tables with row/column selection
Find & Replace with Ctrl+F shortcut
Code blocks and blockquotes
Spell check indicator
Word and character count
Undo/Redo support
Tooltips on all toolbar buttons