VibeRTE Documentation

Getting Started

VibeRTE is a powerful, feature-rich WYSIWYG editor comparable to TinyMCE, but completely free and self-hosted. It provides all the tools you need for advanced content editing in your web applications.

📝 Full-Featured

Complete text formatting, tables, media embedding, and more

🎨 Customizable

Extensive options for colors, fonts, and layout control

⚡ Lightweight

No dependencies - pure vanilla JavaScript

🔧 Easy Integration

Simple jQuery-style or vanilla JS initialization

📱 Responsive

Works perfectly on all devices and screen sizes

🆓 Free & Open

Completely free to use with no restrictions

Key Features

File Operations

New Document
Preview Content
Export to PDF (via print)
Export to DOCX
Export to HTML
Import from HTML
Import from DOCX
Print Document

Editing Tools

Undo/Redo
Cut, Copy, Paste
Paste as Plain Text
Select All
Find & Replace

View Options

Source Code View
Spell Check Toggle
Show Block Boundaries
Preview Mode
Fullscreen Mode

Insert Elements

Images (URL-based)
Hyperlinks
Video Embeds (YouTube, Vimeo)
iFrames
Code Samples
Tables
Math Formulas
Special Characters
Emojis
Horizontal Lines
Page Breaks
Non-Breaking Spaces
Table of Contents

Formatting Options

Bold, Italic, Underline, Strikethrough
Superscript & Subscript
Inline Code
Headings (H1-H6)
Block Formats (Div, Paragraph, Blockquote, Pre)
Text Alignment (Left, Center, Right, Justify)
Font Family Selection
Font Size Control
Line Height Adjustment
Text Color
Background Color
Clear Formatting
Lists (Ordered & Unordered)
Indent & Outdent

Installation

Required Files

<!-- VibeRTE Core (Required) -->
<script src="vibrte.js"></script>

<!-- VibeRTE Themes (Required) -->
<link rel="stylesheet" href="vibe.themes.css">

<!-- VibeRTE Extensions (Optional - for PDF/DOCX/Image export) -->
<script src="vibe.extensions.js"></script>

External Libraries (Optional)

For advanced export features, include these libraries:

<!-- For PDF Export -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>

<!-- For Image Export -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

<!-- For DOCX Export -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/docx/7.8.2/docx.min.js"></script>

<!-- For DOCX Import -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mammoth/1.6.0/mammoth.browser.min.js"></script>

Note: External libraries are only needed if you want to use the advanced export/import features. The editor works perfectly without them.

Method 1: Direct Download

Download all VibeRTE files and include them in your HTML:

<link rel="stylesheet" href="path/to/vibe.themes.css">
<script src="path/to/vibrte.js"></script>
<script src="path/to/vibe.extensions.js"></script>

Method 2: CDN (when available)

<link rel="stylesheet" href="https://cdn.example.com/vibrte/1.0.0/vibe.themes.min.css">
<script src="https://cdn.example.com/vibrte/1.0.0/vibrte.min.js"></script>
<script src="https://cdn.example.com/vibrte/1.0.0/vibe.extensions.min.js"></script>

File Structure

vibrte/
├── vibrte.js              (Core editor - Required)
├── vibe.themes.css        (Themes - Required)
├── vibe.extensions.js     (Advanced features - Optional)
└── documentation.html     (This documentation)

Basic Setup

Create a textarea element in your HTML:

<textarea id="editor"></textarea>

Initialize the editor with JavaScript:

// Vanilla JS
const editor = new VibeRTE('#editor');

// Or with jQuery
$('#editor').VibeRTE();

Build Process

VibeRTE is a standalone JavaScript file that doesn't require a build process. However, for production use, you can minify it:

Using UglifyJS

npm install uglify-js -g
uglifyjs vibrte.js -o vibrte.min.js -c -m

Using Terser

npm install terser -g
terser vibrte.js -o vibrte.min.js -c -m

Production Tip: Always use the minified version in production for better performance and faster load times.

Basic Usage

Simple Initialization

// Initialize with default settings
const editor = new VibeRTE('#myTextarea');

With Themes

<!DOCTYPE html>
<html>
<head>
    <title>VibeRTE with Themes</title>
    <link rel="stylesheet" href="vibe.themes.css">
    <script src="vibrte.js"></script>
</head>
<body>
    <textarea id="editor"></textarea>
    
    <script>
        const editor = new VibeRTE('#editor', {
            theme: 'dark' // Options: 'default', 'dark', 'minimal'
        });
    </script>
</body>
</html>

With Advanced Export Features

<!DOCTYPE html>
<html>
<head>
    <title>VibeRTE Full Features</title>
    <link rel="stylesheet" href="vibe.themes.css">
    
    <!-- External Libraries for Export -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    
    <script src="vibrte.js"></script>
    <script src="vibe.extensions.js"></script>
</head>
<body>
    <textarea id="editor"></textarea>
    
    <script>
        const editor = new VibeRTE('#editor', {
            theme: 'default'
        });
    </script>
</body>
</html>

Advanced Usage

Custom Configuration

const editor = new VibeRTE('#editor', {
    height: '600px',
    width: '100%',
    placeholder: 'Start writing your amazing content...',
    menubar: true,
    statusbar: true,
    toolbar: 'full',
    spellcheck: true,
    autosave: true,
    autosaveInterval: 30000, // 30 seconds
    theme: 'light',
    
    // Custom fonts
    fontFamily: [
        'Arial',
        'Georgia', 
        'Times New Roman',
        'Courier New',
        'Verdana',
        'Comic Sans MS'
    ],
    
    // Custom font sizes
    fontSize: [
        '10px', '12px', '14px', '16px', 
        '18px', '20px', '24px', '28px', '32px'
    ],
    
    // Line heights
    lineHeight: ['1', '1.15', '1.5', '2', '2.5', '3'],
    
    // Callbacks
    onChange: function(content) {
        console.log('Content changed:', content);
    },
    
    onInit: function(editor) {
        console.log('Editor initialized:', editor);
    }
});

Practical Examples

Example 1: Blog Post Editor

<!DOCTYPE html>
<html>
<head>
    <title>Blog Editor</title>
    <script src="vibrte.js"></script>
</head>
<body>
    <h1>Write Your Blog Post</h1>
    <textarea id="blog-editor"></textarea>
    
    <script>
        const blogEditor = new VibeRTE('#blog-editor', {
            height: '500px',
            placeholder: 'Share your thoughts...',
            autosave: true,
            onChange: function(content) {
                // Auto-save to server
                console.log('Saving...', content);
            }
        });
    </script>
</body>
</html>

Example 2: Multiple Editors

<textarea class="editor" name="intro"></textarea>
<textarea class="editor" name="main"></textarea>
<textarea class="editor" name="conclusion"></textarea>

<script>
    // Initialize all editors at once
    const editors = new VibeRTE('.editor', {
        height: '300px',
        menubar: false
    });
</script>

Example 3: Email Composer

const emailEditor = new VibeRTE('#email-body', {
    height: '400px',
    placeholder: 'Compose your email...',
    toolbar: 'full',
    fontFamily: ['Arial', 'Helvetica', 'Times New Roman'],
    onChange: function(content) {
        document.getElementById('email-html').value = content;
    }
});

Example 4: Documentation Editor

const docsEditor = new VibeRTE('#docs-editor', {
    height: '700px',
    placeholder: 'Write documentation...',
    spellcheck: true,
    autosave: true,
    autosaveInterval: 60000, // 1 minute
    onInit: function(editor) {
        // Load autosaved content
        const saved = sessionStorage.getItem('docs_autosave');
        if (saved) {
            editor.setContent(saved, 0);
        }
    }
});

API Reference

Configuration Options

Option	Type	Default	Description
`height`	String	'500px'	Editor height
`width`	String	'100%'	Editor width
`placeholder`	String	'Start typing...'	Placeholder text
`toolbar`	String	'full'	Toolbar preset (full/basic/minimal)
`menubar`	Boolean	true	Show/hide menubar
`statusbar`	Boolean	true	Show/hide statusbar
`autosave`	Boolean	false	Enable autosave
`autosaveInterval`	Number	30000	Autosave interval in milliseconds
`spellcheck`	Boolean	true	Enable browser spellcheck
`fontFamily`	Array	['Arial', 'Georgia', ...]	Available font families
`fontSize`	Array	['8px', '10px', ...]	Available font sizes
`lineHeight`	Array	['1', '1.15', ...]	Available line heights
`onChange`	Function	null	Callback when content changes
`onInit`	Function	null	Callback when editor initializes
`theme`	String	'default'	Editor theme (default/dark/minimal)

Theme Options

Theme	Description	Best For
`default`	Clean, professional light theme	General use, business applications
`dark`	Modern dark theme with reduced eye strain	Low-light environments, developer tools
`minimal`	Ultra-clean, distraction-free design	Content-focused applications, blogs

Switching Themes Dynamically

// Get the editor wrapper
const wrapper = document.querySelector('.vibrte-wrapper');

// Change theme
wrapper.setAttribute('data-theme', 'dark');

// Or for all editors on page
document.querySelectorAll('.vibrte-wrapper').forEach(w => {
    w.setAttribute('data-theme', 'minimal');
});

Public Methods

getContent(index)

Get HTML content from editor instance.

const content = editor.getContent(0);
console.log(content);

setContent(content, index)

Set HTML content in editor instance.

editor.setContent('<h1>Hello World</h1>', 0);

destroy(index)

Destroy editor instance and restore original textarea.

editor.destroy(0);

executeCommand(cmd, value)

Execute a formatting command programmatically.

editor.executeCommand('bold');
editor.executeCommand('fontSize', '20px');

Customization

Custom Styling

You can override default styles by adding your own CSS:

.vibrte-wrapper {
    border: 2px solid #your-color !important;
    border-radius: 12px !important;
}

.vibrte-toolbar {
    background: #your-bg-color !important;
}

.vibrte-editor {
    font-family: 'Your Font', sans-serif !important;
    font-size: 18px !important;
}

Custom Button Actions

const editor = new VibeRTE('#editor');

// Add custom keyboard shortcut
document.querySelector('.vibrte-editor').addEventListener('keydown', function(e) {
    if (e.ctrlKey && e.key === 'k') {
        e.preventDefault();
        // Your custom action
        console.log('Custom shortcut triggered!');
    }
});

Tip: You can access the editor instance through the textarea element: document.querySelector('#editor').rteEditor

Browser Support

Browser	Minimum Version
Chrome	60+
Firefox	55+
Safari	11+
Edge	79+
Opera	47+

Best Practices

Always sanitize HTML content from the editor on the server-side before storing or displaying
Use the onChange callback for auto-saving functionality
Enable autosave for longer forms to prevent data loss
Test content output in different browsers for consistency
Use semantic HTML when possible (headings, paragraphs, lists)
Consider accessibility when customizing colors and fonts
Include vibe.extensions.js only if you need advanced export features
Choose the appropriate theme based on your application's design

Extensions Guide

What's in vibe.extensions.js?

The extensions file provides:

SVG Icons Library: Complete icon set for all menu items
PDF Export: Using jsPDF library
DOCX Export: Using docx.js library
Image Export: Convert content to PNG/JPG using html2canvas
DOCX Import: Using mammoth.js library

Using Extensions Without External Libraries

If external libraries are not included, the editor will show helpful messages:

// User clicks "Export to PDF" without jsPDF
// Alert: "jsPDF library is required. Please include:
// <script src='https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js'></script>"

Checking if Extensions are Loaded

if (typeof window.VibeRTEExtensions !== 'undefined') {
    console.log('Extensions loaded!');
    console.log('Available icons:', window.VibeIcons);
}

Troubleshooting

Editor not initializing

Make sure the script is loaded before initialization:

<script src="vibrte.js"></script>
<script>
    // Wait for DOM to be ready
    document.addEventListener('DOMContentLoaded', function() {
        new VibeRTE('#editor');
    });
</script>

Content not saving

The original textarea is automatically updated. To get the content:

const content = document.querySelector('#editor').value;
// OR
const content = editor.getContent(0);

Styling conflicts

If you're experiencing CSS conflicts, use more specific selectors or add !important to your custom styles.