@nalashaa-sri/vanilla-rte

v1.0.0

Published

10 days ago

A feature-rich Rich Text Editor built with vanilla JavaScript. No dependencies, fully customizable toolbar, and sanitized output.

0High
0Medium
0Low

nalashaa-sri

rich-text-editor rte wysiwyg editor contenteditable vanilla-javascript no-dependencies text-editor html-editor

Vanilla RTE - Rich Text Editor

A feature-rich Rich Text Editor built with vanilla JavaScript. Zero dependencies, fully customizable, and secure.

Features

✨ No Dependencies - Pure vanilla JavaScript
🎨 Customizable Toolbar - Configure buttons, dropdowns, and colors
🔒 Sanitized Output - XSS-safe HTML output
📱 Responsive - Works on desktop and mobile
♿ Accessible - ARIA labels and keyboard navigation
📦 Lightweight - Small bundle size

Installation

npm install vanilla-rte

Quick Start

HTML

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="node_modules/vanilla-rte/src/styles/main.css">
  <link rel="stylesheet" href="node_modules/vanilla-rte/src/styles/components.css">
  <!-- Font Awesome for icons (optional) -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
  <div id="editor-container"></div>
  <script type="module" src="your-script.js"></script>
</body>
</html>

JavaScript

import RTE from 'vanilla-rte';

const editor = new RTE('editor-container', {
  toolbar: [
    {
      group: 'formatting',
      items: [
        { type: 'button', label: 'Bold', command: 'bold', icon: '<i class="fas fa-bold"></i>' },
        { type: 'button', label: 'Italic', command: 'italic', icon: '<i class="fas fa-italic"></i>' },
        { type: 'button', label: 'Underline', command: 'underline', icon: '<i class="fas fa-underline"></i>' }
      ]
    },
    {
      group: 'paragraph',
      items: [
        {
          type: 'select',
          label: 'Heading',
          command: 'formatBlock',
          options: [
            { label: 'Paragraph', value: 'p' },
            { label: 'H1', value: 'h1' },
            { label: 'H2', value: 'h2' },
            { label: 'H3', value: 'h3' }
          ]
        }
      ]
    }
  ]
});

// Get content
const html = editor.getContent();

// Set content
editor.setContent('<h1>Hello World</h1>');

// Clear content
editor.clearContent();

Toolbar Configuration

Button Types

| Type | Description | Example | |------|-------------|---------| | button | Simple action button | Bold, Italic | | select | Dropdown menu | Font, Heading | | color | Color picker | Text Color, Highlight |

Available Commands

Formatting: bold, italic, underline, strikeThrough, superscript, subscript, code, clearFormatting

Paragraph: formatBlock, insertUnorderedList, insertOrderedList, insertBlockquote, insertChecklist

Alignment: alignLeft, alignCenter, alignRight, alignJustify, indent, outdent

Insert: createLink, insertImage, insertAudio, insertVideo, insertTable, insertCodeBlock, insertEmoji, insertHorizontalRule

Typography: fontName, fontSize, foreColor, backColor, lineHeight

View: toggleSource, toggleFullscreen

API

Methods

// Get sanitized HTML content
editor.getContent()

// Set HTML content
editor.setContent(html)

// Clear all content
editor.clearContent()

// Load from JSON
editor.loadFromJSON({ content: '<p>Hello</p>' })

// Load from HTML string
editor.loadFromHTML('<p>Hello</p>')

// Export in different formats
editor.export('html')     // HTML
editor.export('json')     // JSON
editor.export('markdown') // Markdown
editor.export('text')     // Plain text

// Focus the editor
editor.focus()

// Toggle source view
editor.toggleSource()

// Toggle fullscreen
editor.toggleFullscreen()

// Destroy instance
editor.destroy()

Styling

The editor uses CSS custom properties for theming:

:root {
  --color-primary: #333333;
  --color-primary-dark: #1a1a1a;
  --color-bg: #ffffff;
  --color-border: #e0e0e0;
  --color-text: #2c3e50;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
}

Browser Support

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

License

MIT