🚀 VibeRTE Quick Reference

Everything you need to know at a glance

📦 Installation

<!-- Required Files -->
<link rel="stylesheet" href="vibe.themes.css">
<script src="vibrte.js"></script>

<!-- Optional Extensions -->
<script src="vibe.extensions.js"></script>

⚡ Basic Usage

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

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

// With options
new VibeRTE('#editor', {
    height: '500px',
    theme: 'dark'
});

🎨 Themes

{ theme: 'dark' }

🔧 Methods

// Get content
editor.getContent(0)

// Set content
editor.setContent('<h1>Hi</h1>', 0)

// Destroy
editor.destroy(0)

// Execute command
editor.executeCommand('bold')

⚙️ Configuration Options

Option Type Default Description
height String '500px' Editor height
width String '100%' Editor width
theme String 'default' default | dark | minimal
placeholder String 'Start typing...' Placeholder text
menubar Boolean true Show/hide menubar
statusbar Boolean true Show/hide statusbar
autosave Boolean false Enable autosave
autosaveInterval Number 30000 Autosave interval (ms)
spellcheck Boolean true Enable spellcheck
onChange Function null Content change callback
onInit Function null Init callback

🔌 Extensions (vibe.extensions.js)

✅ When to use: Include when you need PDF/DOCX/Image export features

Required External Libraries:

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

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

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

<!-- DOCX Import -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mammoth/1.6.0/mammoth.browser.min.js"></script>
⚠️ Note: Without external libraries, the editor will show helpful error messages directing users to the documentation.

📝 File Menu

✂️ Edit Menu

👁️ View Menu

➕ Insert Menu

🎨 Format Menu

⌨️ Keyboard Shortcuts

💡 Common Examples

Example 1: Blog Editor

const blogEditor = new VibeRTE('#blog-editor', {
    height: '600px',
    theme: 'minimal',
    placeholder: 'Write your blog post...',
    autosave: true,
    onChange: function(content) {
        // Save to localStorage or server
        localStorage.setItem('draft', content);
    }
});

Example 2: Dark Theme for Developers

const codeEditor = new VibeRTE('#code-editor', {
    height: '500px',
    theme: 'dark',
    spellcheck: false,
    fontFamily: ['Courier New', 'Monaco', 'Consolas']
});

Example 3: Minimal Email Composer

const emailEditor = new VibeRTE('#email-body', {
    height: '400px',
    theme: 'minimal',
    menubar: false,
    statusbar: false
});

Example 4: Dynamic Theme Switching

function switchTheme(theme) {
    document.querySelectorAll('.vibrte-wrapper').forEach(wrapper => {
        wrapper.setAttribute('data-theme', theme);
    });
}

// Usage
switchTheme('dark');  // Switch to dark theme
switchTheme('minimal');  // Switch to minimal theme

Example 5: Get/Set Content

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

// Set content
editor.setContent('<h1>New Content</h1><p>Hello!</p>', 0);

// Get from textarea directly
const textareaContent = document.getElementById('editor').value;

🌐 Browser Support

Chrome 60+ ✅ Full Support
Firefox 55+ ✅ Full Support
Safari 11+ ✅ Full Support
Edge 79+ ✅ Full Support
Opera 47+ ✅ Full Support

🔧 Troubleshooting

Editor not initializing?

// Make sure DOM is loaded
document.addEventListener('DOMContentLoaded', function() {
    new VibeRTE('#editor');
});

Export features not working?

Make sure you've included vibe.extensions.js and the required external libraries for the feature you're using.

Emoji/Special character picker not showing?

// Check if modal styles are loaded
// Make sure vibe.themes.css is included

Theme not applying?

// Check if themes CSS is loaded
// Verify theme name is correct: 'default', 'dark', or 'minimal'
// Check browser console for errors

✨ Best Practices

📚 Quick Links

🎉 Ready to Get Started?

Check out the full documentation for more details and advanced features!

<!-- Minimal Setup -->
<link rel="stylesheet" href="vibe.themes.css">
<script src="vibrte.js"></script>

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

<script>
    new VibeRTE('#editor', { theme: 'dark' });
</script>