NEXEDITOR Documentation

A powerful, lightweight, and feature-rich WYSIWYG editor with zero dependencies.

Welcome! This documentation will guide you through everything you need to know about NEXEDITOR, from basic installation to advanced plugin development.

Key Features

Zero Dependencies - Pure vanilla JavaScript, no jQuery or other libraries required
AI-Powered - Integrated AI content generation with GPT-4 support
Internationalization - Built-in i18n system with 20+ languages
RTL Support - Full right-to-left language support
Dark Mode - Professional dark theme included
Code View - Switch between visual and code editing seamlessly
10+ Plugins - Rich set of plugins for extended functionality
Extensible - Easy-to-use plugin API for custom extensions
Responsive - Works perfectly on all devices
Modern - Built with ES6+ and modern web standards

Quick Links

📦

Installation

Get started in minutes

Installation

Purchase from Codester/

NEXEDITOR is available exclusively on Codester. After purchase, download the package and extract it to your project.

                    html
                

                    <!-- Include CSS -->
<link rel="stylesheet" href="path/to/nexeditor/nexeditor.css">

<!-- Include JavaScript (ES6 Module) -->
<script type="module">
    import NEXEDITOR from './path/to/nexeditor/nexeditor.js';

    // Your code here
</script>
                

Browser Support NEXEDITOR supports all modern browsers: Chrome 90+, Firefox 88+, Safari 14+, Edge 90+

Quick Start

Basic Setup

Create your first NEXEDITOR instance in 3 simple steps:

Step 1: HTML Structure

                    html
                

                        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NEXEDITOR - Quick Start</title>

    <!-- NEXEDITOR CSS -->
    <link rel="stylesheet" href="path/to/nexeditor.css">
</head>
<body>
    <!-- Editor Container -->
    <div id="editor"></div>

    <!-- NEXEDITOR JavaScript -->
    <script src="path/to/nexeditor.umd.js"></script>
</body>
</html>
                

Step 2: Initialize Editor

                    javascript
                

                        // Initialize NEXEDITOR
const editor = new NEXEDITOR('#editor', {
    lang: 'en',
    theme: 'light',
    minHeight: '400px',
    placeholder: 'Start typing...'
});

console.log('Editor initialized!', editor);
                

Step 3: Get/Set Content

                    javascript
                

                        // Set content
editor.setContent('<h1>Hello World!</h1><p>Welcome to NEXEDITOR</p>');

// Get content
const content = editor.getContent();
console.log('Current content:', content);
                

That's it! You now have a fully functional rich text editor. Continue reading to learn about advanced features and customization options.

Basic Usage

Setting Initial Content

You can set initial content in multiple ways:

                    javascript
                

                        // Method 1: Via options
const editor = new NEXEDITOR('#editor', {
    content: '<h1>Initial Content</h1><p>Some text here</p>'
});

// Method 2: Using setContent()
editor.setContent('<h1>New Content</h1>');

// Method 3: From existing HTML
const editor = new NEXEDITOR('#editor');
// If #editor already contains HTML, it will be used as initial content
                

Getting Content

                    javascript
                

                        // Get HTML content
const htmlContent = editor.getContent();
console.log('HTML:', htmlContent);

// Get plain text (no HTML tags)
const textContent = editor.getTextContent();
console.log('Text:', textContent);

// Check if editor is empty
if (editor.isEmpty()) {
    console.log('Editor is empty');
}
                

Clearing Content

                    javascript
                
                        // Clear all content
editor.clear();

// Or set to empty
editor.setContent('');

Focus Management

                    javascript
                

                        // Focus the editor
editor.focus();

// Blur (remove focus)
editor.blur();

// Check if focused
if (editor.isFocused()) {
    console.log('Editor has focus');
}
                

Listening to Changes

                    javascript
                

                        // Listen for content changes
editor.on('change', () => {
    const content = editor.getContent();
    console.log('Content changed:', content);

    // Auto-save to localStorage
    localStorage.setItem('editor-content', content);
});

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

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

Initialization Options

NEXEDITOR accepts a comprehensive set of configuration options during initialization:

                    javascript
                

                        const editor = new NEXEDITOR('#editor', {
    // Content & Placeholder
    content: '',                    // Initial HTML content
    placeholder: 'Start typing...', // Placeholder text

    // Appearance
    theme: 'light',                 // 'light' | 'dark'
    minHeight: '300px',             // Minimum editor height
    maxHeight: null,                // Maximum editor height (null = unlimited)

    // Localization
    lang: 'en',                     // Language code (en, ro, es, fr, de, etc.)
    rtl: false,                     // Enable right-to-left mode

    // Features
    codeView: true,                 // Enable code view toggle
    allowHtml: true,                // Allow HTML content

    // Toolbar
    toolbar: [                      // Custom toolbar buttons
        'bold', 'italic', 'underline',
        '|',  // Separator
        'h1', 'h2', 'h3',
        '|',
        'link', 'image'
    ],

    // Plugins
    plugins: [],                    // Array of plugins to load

    // Events
    onChange: null,                 // Callback on content change
    onFocus: null,                  // Callback on focus
    onBlur: null,                   // Callback on blur
    onInit: null                    // Callback after initialization
});
                

Configuration Options Reference

Option	Type	Default	Description
content	string	`''`	Initial HTML content for the editor
placeholder	string	`'Start typing...'`	Placeholder text when editor is empty
theme	string	`'light'`	Editor theme: 'light' or 'dark'
lang	string	`'en'`	Language code (en, ro, es, fr, de, ar, etc.)
rtl	boolean	`false`	Enable right-to-left text direction
minHeight	string	`'300px'`	Minimum height of the editor
maxHeight	string\|null	`null`	Maximum height (null for unlimited)
codeView	boolean	`true`	Enable code view toggle button
plugins	array	`[]`	Array of plugins to load
toolbar	array\|null	`null`	Custom toolbar configuration

Themes

NEXEDITOR comes with two built-in themes: Light and Dark.

Setting Theme on Initialization

                    javascript
                

                        // Light theme (default)
const editor = new NEXEDITOR('#editor', {
    theme: 'light'
});

// Dark theme
const editor = new NEXEDITOR('#editor', {
    theme: 'dark'
});
                

Changing Theme Dynamically

                    javascript
                

                        // Switch to dark theme
editor.setTheme('dark');

// Switch to light theme
editor.setTheme('light');

// Get current theme
const currentTheme = editor.getTheme();
console.log('Current theme:', currentTheme);

// Toggle theme
const newTheme = editor.getTheme() === 'light' ? 'dark' : 'light';
editor.setTheme(newTheme);
                

Theme Toggle Example

                    html
                

                        <!-- HTML -->
<button id="themeToggle">
    <i class="icon-moon"></i> Toggle Theme
</button>

<div id="editor"></div>

<script>
// JavaScript
const editor = new NEXEDITOR('#editor');

document.getElementById('themeToggle').addEventListener('click', () => {
    const currentTheme = editor.getTheme();
    const newTheme = currentTheme === 'light' ? 'dark' : 'light';
    editor.setTheme(newTheme);

    // Update button icon
    const icon = document.querySelector('#themeToggle i');
    icon.className = newTheme === 'dark' ? 'icon-sun' : 'icon-moon';
});
</script>
                

Custom Themes Want to create your own theme? Check out the Custom Themes section for detailed instructions.

Localization (i18n)

NEXEDITOR has built-in internationalization support for 20+ languages out of the box.

Supported Languages

The following languages are available by default:

English (en)
Romanian (ro)
Spanish (es)
French (fr)
German (de)
Italian (it)
Portuguese (pt)

Russian (ru)
Chinese (zh)
Japanese (ja)
Korean (ko)
Arabic (ar)
Hebrew (he)
Turkish (tr)

Polish (pl)
Dutch (nl)
Swedish (sv)
Norwegian (no)
Danish (da)
Finnish (fi)
Czech (cs)

Setting Language

                    javascript
                

                        // Set language on initialization
const editor = new NEXEDITOR('#editor', {
    lang: 'ro'  // Romanian
});

// Change language dynamically
editor.setLanguage('es');  // Spanish

// Get current language
const currentLang = editor.getLanguage();
console.log('Current language:', currentLang);
                

Language Switcher Example

                    html
                

                        <!-- HTML -->
<select id="languageSelector">
    <option value="en">English</option>
    <option value="ro">Română</option>
    <option value="es">Español</option>
    <option value="fr">Français</option>
    <option value="de">Deutsch</option>
    <option value="ar">العربية</option>
</select>

<div id="editor"></div>

<script>
// JavaScript
const editor = new NEXEDITOR('#editor', {
    lang: 'en'
});

document.getElementById('languageSelector').addEventListener('change', (e) => {
    const selectedLang = e.target.value;
    editor.setLanguage(selectedLang);

    // Auto-enable RTL for Arabic and Hebrew
    if (selectedLang === 'ar' || selectedLang === 'he') {
        editor.setRTL(true);
    } else {
        editor.setRTL(false);
    }
});
</script>
                

Adding Custom Translations

                    javascript
                

                        // Add custom translation
editor.i18n.addTranslation('custom-lang', {
    'Bold': 'Negrito',
    'Italic': 'Itálico',
    'Underline': 'Sublinhado',
    'Insert Link': 'Inserir Link',
    'Insert Image': 'Inserir Imagem',
    // ... add all required translations
});

// Use custom language
editor.setLanguage('custom-lang');
                

Translation Keys For a complete list of translation keys, check the src/core/i18n.js file in the source code.

RTL Support

NEXEDITOR provides full support for right-to-left (RTL) languages like Arabic, Hebrew, Persian, and Urdu.

Enabling RTL Mode

                    javascript
                

                        // Enable RTL on initialization
const editor = new NEXEDITOR('#editor', {
    rtl: true,
    lang: 'ar'  // Arabic
});

// Toggle RTL dynamically
editor.setRTL(true);   // Enable RTL
editor.setRTL(false);  // Disable RTL

// Check RTL status
const isRTL = editor.isRTL();
console.log('RTL enabled:', isRTL);
                

RTL with Language Switching

                    javascript
                

                        // Auto-enable RTL for RTL languages
const rtlLanguages = ['ar', 'he', 'fa', 'ur'];

function setLanguage(lang) {
    editor.setLanguage(lang);

    // Auto-enable/disable RTL
    if (rtlLanguages.includes(lang)) {
        editor.setRTL(true);
    } else {
        editor.setRTL(false);
    }
}

// Example: Switch to Arabic
setLanguage('ar');  // Automatically enables RTL

// Example: Switch to English
setLanguage('en');  // Automatically disables RTL
                

RTL Direction Toggle

                    html
                

                        <!-- HTML -->
<button id="rtlToggle">
    Toggle Text Direction
</button>

<div id="editor"></div>

<script>
// JavaScript
const editor = new NEXEDITOR('#editor');

document.getElementById('rtlToggle').addEventListener('click', () => {
    const currentRTL = editor.isRTL();
    editor.setRTL(!currentRTL);

    console.log('RTL:', !currentRTL ? 'enabled' : 'disabled');
});
</script>
                

Plugin RTL Support All built-in plugins automatically respect the RTL setting. When RTL is enabled, plugin modals and UI elements adjust their layout accordingly.

Toolbar

The toolbar provides quick access to formatting options and actions.

Default Toolbar

By default, NEXEDITOR includes the following toolbar buttons:

                    javascript
                

                        // Default toolbar buttons
const defaultToolbar = [
    'bold', 'italic', 'underline', 'strikethrough',
    '|',  // Separator
    'h1', 'h2', 'h3',
    '|',
    'orderedList', 'unorderedList',
    '|',
    'link', 'image',
    '|',
    'alignLeft', 'alignCenter', 'alignRight',
    '|',
    'undo', 'redo',
    '|',
    'codeView'
];
                

Custom Toolbar

                    javascript
                

                        // Minimal toolbar
const editor = new NEXEDITOR('#editor', {
    toolbar: ['bold', 'italic', 'link', 'image']
});

// Toolbar with groups
const editor = new NEXEDITOR('#editor', {
    toolbar: [
        'bold', 'italic', 'underline',
        '|',
        'h1', 'h2',
        '|',
        'orderedList', 'unorderedList',
        '|',
        'link'
    ]
});

// Hide toolbar completely
const editor = new NEXEDITOR('#editor', {
    toolbar: false
});
                

Available Toolbar Buttons

Button	Action	Icon
bold	Apply bold formatting
italic	Apply italic formatting
underline	Apply underline formatting
strikethrough	Apply strikethrough formatting
h1	Format as heading 1
h2	Format as heading 2
h3	Format as heading 3
orderedList	Insert numbered list
unorderedList	Insert bulleted list
link	Insert/edit link
image	Insert image
alignLeft	Align text left
alignCenter	Align text center
alignRight	Align text right
undo	Undo last action
redo	Redo last undone action
codeView	Toggle code view
\|	Toolbar separator	—

Plugin Buttons When you load plugins, they can add their own buttons to the toolbar. Check each plugin's documentation for details.

Code View

Code View allows users to switch between visual editing and raw HTML editing with syntax highlighting.

Enabling Code View

                    javascript
                

                        // Code View is enabled by default
const editor = new NEXEDITOR('#editor');

// Disable Code View
const editor = new NEXEDITOR('#editor', {
    codeView: false
});
                

Toggling Code View Programmatically

                    javascript
                

                        // Show code view
editor.showCodeView();

// Show visual editor
editor.showVisualEditor();

// Toggle between views
editor.toggleCodeView();

// Check current view
if (editor.isCodeViewActive()) {
    console.log('Code view is active');
} else {
    console.log('Visual editor is active');
}
                

Custom Code View Button

                    html
                

                        <!-- HTML -->
<button id="toggleCode">
    View Source Code
</button>

<div id="editor"></div>

<script>
// JavaScript
const editor = new NEXEDITOR('#editor', {
    codeView: false  // Hide default button
});

document.getElementById('toggleCode').addEventListener('click', () => {
    editor.toggleCodeView();

    // Update button text
    const btn = document.getElementById('toggleCode');
    btn.textContent = editor.isCodeViewActive()
        ? 'View Visual Editor'
        : 'View Source Code';
});
</script>
                

HTML Validation Code View includes basic HTML validation. Invalid HTML will be automatically cleaned and formatted when switching back to visual mode.

Content Management

Getting Content

                    javascript
                

                        // Get HTML content
const html = editor.getContent();
console.log('HTML:', html);

// Get plain text (strips HTML tags)
const text = editor.getTextContent();
console.log('Text:', text);

// Get word count
const wordCount = editor.getWordCount();
console.log('Words:', wordCount);

// Get character count
const charCount = editor.getCharacterCount();
console.log('Characters:', charCount);
                

Setting Content

                    javascript
                

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

// Append content
editor.appendContent('<p>Additional paragraph</p>');

// Prepend content
editor.prependContent('<h2>Title at the beginning</h2>');

// Insert content at cursor
editor.insertContent('<strong>Bold text</strong>');
                

Clearing Content

                    javascript
                

                        // Clear all content
editor.clear();

// Check if empty
if (editor.isEmpty()) {
    console.log('Editor is empty');
    // Show placeholder or default content
    editor.setContent('<p>Please enter some content...</p>');
}
                

Form Integration

                    html
                

                        <!-- HTML Form -->
<form id="myForm">
    <div id="editor"></div>
    <input type="hidden" name="content" id="content-input">
    <button type="submit">Submit</button>
</form>

<script>
// JavaScript
const editor = new NEXEDITOR('#editor');

// Sync editor content with hidden input on form submit
document.getElementById('myForm').addEventListener('submit', (e) => {
    e.preventDefault();

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

    // Set to hidden input
    document.getElementById('content-input').value = content;

    // Now submit form (or use AJAX)
    console.log('Submitting content:', content);

    // AJAX example
    fetch('/api/save', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ content: content })
    })
    .then(response => response.json())
    .then(data => console.log('Saved:', data));
});
</script>
                

Plugin System

NEXEDITOR includes a powerful plugin system that allows you to extend functionality. The package comes with 10+ premium plugins ready to use.

Loading Plugins

                    javascript
                

                        // Load plugins by name
const editor = new NEXEDITOR('#editor', {
    plugins: [
        'emoji',
        'table',
        'video',
        'icon'
    ]
});

// Load plugins with options
const editor = new NEXEDITOR('#editor', {
    plugins: [
        'emoji',
        {
            name: 'autoSave',
            options: {
                interval: 30000  // Auto-save every 30 seconds
            }
        },
        {
            name: 'aiContentGenerator',
            options: {
                apiKey: 'your-api-key',
                apiEndpoint: 'https://api.openai.com/v1/chat/completions'
            }
        }
    ]
});
                

Available Plugins

🤖

AI Content Generator

Generate content with GPT-4

💾

Auto Save

Automatic content saving

Create responsive tables

🎥

Video Embed

YouTube, Vimeo support

🔌

5+ More Plugins

Icons, callouts, and more

Plugin Loading Patterns

                    javascript
                

                        // Simple plugin loading (no options)
const editor = new NEXEDITOR('#editor', {
    plugins: ['emoji', 'icon', 'specialCharacters']
});

// Plugin with options
const editor = new NEXEDITOR('#editor', {
    plugins: [
        {
            name: 'autoSave',
            options: {
                interval: 60000,  // Save every 60 seconds
                storageKey: 'my-editor-content'
            }
        }
    ]
});

// Mix of simple and configured plugins
const editor = new NEXEDITOR('#editor', {
    plugins: [
        'emoji',  // No options
        { name: 'table', options: { maxRows: 10 } },  // With options
        'video',  // No options
        { name: 'aiContentGenerator', options: { apiKey: 'key' } }  // With options
    ]
});
                

AI Content Generator Plugin AI-Powered

Generate high-quality content using Anthropic's Claude or OpenAI's GPT. This plugin supports multiple content types and automatically respects the editor's language and RTL settings.

Backend Required This plugin requires a backend endpoint to proxy requests to AI APIs. Direct browser requests are not supported for security reasons (API key protection).

Quick Setup - Choose Your Provider

🔮 Claude (Anthropic)

Most intelligent and context-aware AI, excellent for complex content generation.

Best for creative writing
Superior context understanding
Excellent at following instructions

Setup Claude

⚡ GPT-4 (OpenAI)

Widely adopted and versatile AI, great for general-purpose content generation.

Fast response times
Extensive training data
Well-documented API

Setup GPT-4

Backend Setup - Claude (Anthropic)

PHP Endpoint (Simple)

php

<?php
// claude-endpoint.php
header('Content-Type: application/json');
header('Access-Control-Allow-Origin: *');

define('ANTHROPIC_API_KEY', 'your-api-key-here');
define('ANTHROPIC_API_URL', 'https://api.anthropic.com/v1/messages');

$input = json_decode(file_get_contents('php://input'), true);

$payload = [
    'model' => $input['model'] ?? 'claude-sonnet-4-5-20250929',
    'max_tokens' => $input['max_tokens'] ?? 2048,
    'temperature' => $input['temperature'] ?? 0.7,
    'messages' => $input['messages']
];

$ch = curl_init(ANTHROPIC_API_URL);
curl_setopt_array($ch, [
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_POST => true,
    CURLOPT_POSTFIELDS => json_encode($payload),
    CURLOPT_HTTPHEADER => [
        'Content-Type: application/json',
        'x-api-key: ' . ANTHROPIC_API_KEY,
        'anthropic-version: 2023-06-01'
    ]
]);

$response = curl_exec($ch);
$httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
curl_close($ch);

http_response_code($httpCode);
$data = json_decode($response, true);

echo json_encode([
    'success' => true,
    'content' => $data['content'][0]['text'] ?? '',
    'html' => $data['content'][0]['text'] ?? ''
]);
?>

Laravel Example

php

// routes/web.php
Route::post('/api/ai/claude-generate', [AIController::class, 'generateClaude'])
    ->middleware(['auth', 'throttle:10,1']);

// app/Http/Controllers/AIController.php
public function generateClaude(Request $request)
{
    $validated = $request->validate([
        'model' => 'required|string',
        'max_tokens' => 'required|integer|max:4096',
        'messages' => 'required|array'
    ]);

    $response = Http::withHeaders([
        'x-api-key' => config('services.anthropic.api_key'),
        'anthropic-version' => '2023-06-01',
        'content-type' => 'application/json'
    ])->post('https://api.anthropic.com/v1/messages', $validated);

    return response()->json([
        'content' => $response->json()['content'][0]['text'] ?? ''
    ]);
}

Backend Setup - GPT (OpenAI)

PHP Endpoint (Simple)

php

<?php
// openai-endpoint.php
header('Content-Type: application/json');
header('Access-Control-Allow-Origin: *');

define('OPENAI_API_KEY', 'your-api-key-here');
define('OPENAI_API_URL', 'https://api.openai.com/v1/chat/completions');

$input = json_decode(file_get_contents('php://input'), true);

$systemMessage = 'You are an expert HTML/Bootstrap 5 content generator. Generate professional, responsive, and modern web content. Return ONLY the HTML code without explanations.';

$payload = [
    'model' => $input['model'] ?? 'gpt-4',
    'max_tokens' => $input['max_tokens'] ?? 2048,
    'temperature' => $input['temperature'] ?? 0.7,
    'messages' => [
        ['role' => 'system', 'content' => $systemMessage],
        ['role' => 'user', 'content' => $input['prompt']]
    ]
];

$ch = curl_init(OPENAI_API_URL);
curl_setopt_array($ch, [
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_POST => true,
    CURLOPT_POSTFIELDS => json_encode($payload),
    CURLOPT_HTTPHEADER => [
        'Content-Type: application/json',
        'Authorization: Bearer ' . OPENAI_API_KEY
    ]
]);

$response = curl_exec($ch);
$httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
curl_close($ch);

http_response_code($httpCode);
$data = json_decode($response, true);

echo json_encode([
    'success' => true,
    'content' => $data['choices'][0]['message']['content'] ?? '',
    'html' => $data['choices'][0]['message']['content'] ?? ''
]);
?>

Node.js/Express Example

javascript

const express = require('express');
const fetch = require('node-fetch');

app.post('/api/ai/openai-generate', async (req, res) => {
    try {
        const { model, max_tokens, temperature, prompt } = req.body;

        const response = await fetch('https://api.openai.com/v1/chat/completions', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${process.env.OPENAI_API_KEY}`
            },
            body: JSON.stringify({
                model: model || 'gpt-4',
                max_tokens: max_tokens || 2048,
                temperature: temperature || 0.7,
                messages: [
                    {
                        role: 'system',
                        content: 'You are an expert HTML/Bootstrap 5 content generator.'
                    },
                    {
                        role: 'user',
                        content: prompt
                    }
                ]
            })
        });

        const data = await response.json();
        res.json({
            content: data.choices[0].message.content
        });

    } catch (error) {
        res.status(500).json({ error: { message: error.message } });
    }
});

Frontend Installation

javascript

import NEXEDITOR from './nexeditor.js';
import AIContentGeneratorPlugin from './plugins/AIContentGeneratorPlugin.js';

// Register plugin
NEXEDITOR.registerPlugin(AIContentGeneratorPlugin);

// Option 1: Using Claude
const editor = new NEXEDITOR('#editor', {
    plugins: [
        {
            name: 'aiContentGenerator',
            options: {
                provider: 'claude',
                claudeEndpoint: '/api/ai/claude-generate',
                claudeModel: 'claude-sonnet-4-5-20250929',
                maxTokens: 2048,
                temperature: 0.7,
                useStaticFallback: true,
                respectLocale: true,
                respectRTL: true
            }
        }
    ]
});

// Option 2: Using GPT
const editor = new NEXEDITOR('#editor', {
    plugins: [
        {
            name: 'aiContentGenerator',
            options: {
                provider: 'gpt',
                openaiEndpoint: '/api/ai/openai-generate',
                openaiModel: 'gpt-4',
                maxTokens: 2048,
                temperature: 0.7,
                useStaticFallback: true,
                respectLocale: true,
                respectRTL: true
            }
        }
    ]
});

Configuration Options

Option	Type	Default	Description
provider	string	`'claude'`	AI provider: 'claude' or 'gpt'
claudeEndpoint	string	`'/api/ai/claude-generate'`	Claude backend endpoint URL
claudeModel	string	`'claude-sonnet-4-5-20250929'`	Claude model to use
openaiEndpoint	string	`'/api/ai/openai-generate'`	OpenAI backend endpoint URL
openaiModel	string	`'gpt-4'`	OpenAI model to use
maxTokens	number	`2048`	Maximum tokens in response
temperature	number	`0.7`	Response creativity (0-2)
useStaticFallback	boolean	`true`	Use static templates if API fails
respectLocale	boolean	`true`	Generate in editor's language
respectRTL	boolean	`true`	Format RTL for Arabic/Hebrew
customPrompts	array	`[]`	Add custom quick templates

Available AI Models

Claude (Anthropic)

claude-sonnet-4-5-20250929 - Latest Sonnet, most intelligent (recommended)
claude-opus-4-1 - Most powerful for complex tasks
claude-4 - Standard Claude 4 model

GPT (OpenAI)

gpt-4 - Most capable GPT model (recommended)
gpt-4-turbo - Faster, more cost-effective
gpt-3.5-turbo - Budget-friendly option

Usage

Click the 🤖 AI button in the toolbar to open the AI Content Generator modal. The plugin provides:

Provider Selection - Switch between Claude and GPT-4 in the UI
Quick Templates - Pre-built prompts for common content types
Content Types - Generate, Improve, Translate, Expand, or Summarize
Multi-language Support - Translate to 21+ languages
Language Detection - Automatically generates in editor's current language
RTL Support - Properly formats RTL content for Arabic, Hebrew, etc.
Bootstrap 5 - Generates responsive, modern HTML
Advanced Settings - Model selection, temperature, max tokens

Built-in Quick Prompts

Template	Description
💬 FAQ Section	Create an FAQ with Bootstrap accordion
✨ Features Grid	Generate feature cards with icons
📊 Pricing Table	Create pricing plans with CTA buttons
⭐ Testimonials	Customer reviews section
🎯 Hero Section	Modern hero with CTA buttons
📝 Blog Post	Blog post structure with sections
🛍️ Product Cards	Product showcase with cards
📱 Contact Section	Contact info and form

Content Generation Types

Generate New Content - Create content from scratch based on your description
Improve Selected Text - Enhance quality while maintaining meaning
Translate Content - Translate to 21+ languages
Expand Content - Add more details and elaboration
Summarize Content - Condense while keeping key points

Translation Languages

The plugin supports translation to 21 languages:

English
Romanian
Spanish
French
German
Italian
Portuguese

Russian
Chinese
Japanese
Korean
Arabic (RTL)
Hebrew (RTL)
Turkish

Polish
Dutch
Swedish
Norwegian
Danish
Finnish
Czech

Security Best Practices

Critical Security Notes

Never expose API keys in frontend code
Always use a backend endpoint to proxy API requests
Implement rate limiting (10-20 requests/minute recommended)
Add authentication middleware to protect endpoints
Validate and sanitize all user inputs
Include CSRF token protection
Use HTTPS in production
Monitor API usage and costs

Provider Comparison

Feature	Claude	GPT-4
Context Understanding	⭐⭐⭐⭐⭐ Excellent	⭐⭐⭐⭐ Very Good
Creative Writing	⭐⭐⭐⭐⭐ Excellent	⭐⭐⭐⭐ Very Good
Following Instructions	⭐⭐⭐⭐⭐ Excellent	⭐⭐⭐⭐ Very Good
Speed	⭐⭐⭐⭐ Fast	⭐⭐⭐⭐⭐ Very Fast
Cost	$$$ Moderate	$$ Affordable
Best For	Complex content, creative writing	General purpose, quick tasks

Pro Tips

The more specific your prompt, the better the results
Use Quick Templates as starting points, then customize
Try both providers to see which works best for your needs
Adjust temperature: lower (0.3-0.5) for factual content, higher (0.7-0.9) for creative content
Use the Advanced Settings to fine-tune generation

Auto Save Plugin Popular

Automatically save editor content to localStorage at regular intervals. Never lose your work!

Installation

                    javascript
                

                        const editor = new NEXEDITOR('#editor', {
    plugins: [
        {
            name: 'autoSave',
            options: {
                interval: 30000,  // Save every 30 seconds
                storageKey: 'nexeditor-content',  // localStorage key
                showIndicator: true,  // Show save indicator
                onSave: (content) => {
                    console.log('Content auto-saved:', content);
                }
            }
        }
    ]
});
                

Configuration Options

Option	Type	Default	Description
interval	number	`30000`	Auto-save interval in milliseconds
storageKey	string	`'nexeditor-autosave'`	localStorage key for saving
showIndicator	boolean	`true`	Show visual save indicator
onSave	function	`null`	Callback function on save

Manual Save

                    javascript
                
                        // Access the plugin instance
const autoSavePlugin = editor.getPlugin('autoSave');

// Trigger manual save
autoSavePlugin.save();

// Clear saved content
autoSavePlugin.clear();

Restore Saved Content

                    javascript
                

                        // Check if there's saved content
const savedContent = localStorage.getItem('nexeditor-autosave');

if (savedContent) {
    // Ask user if they want to restore
    if (confirm('Restore previous session?')) {
        editor.setContent(savedContent);
    }
}
                

Server-Side Auto Save

                    javascript
                

                        const editor = new NEXEDITOR('#editor', {
    plugins: [
        {
            name: 'autoSave',
            options: {
                interval: 60000,  // Save every minute
                onSave: async (content) => {
                    // Save to server via AJAX
                    try {
                        const response = await fetch('/api/autosave', {
                            method: 'POST',
                            headers: { 'Content-Type': 'application/json' },
                            body: JSON.stringify({
                                content: content,
                                timestamp: Date.now()
                            })
                        });

                        if (response.ok) {
                            console.log('✓ Saved to server');
                        }
                    } catch (error) {
                        console.error('× Save failed:', error);
                    }
                }
            }
        }
    ]
});
                

Emoji Picker Plugin

Insert emojis with a beautiful picker featuring 1000+ emojis, categories, search, and recent history.

Installation

                    javascript
                
                        const editor = new NEXEDITOR('#editor', {
    plugins: ['emoji']
});

Features

1000+ emojis from all categories
Category filtering (Smileys, People, Animals, Food, etc.)
Emoji search with keywords
Recently used emojis
Skin tone variations
Keyboard navigation

Usage

Click the emoji button in the toolbar to open the picker.

Programmatic Usage

                    javascript
                
                        // Insert emoji programmatically
editor.insertContent('😀');

// Insert multiple emojis
editor.insertContent('🎉🎊🎈');

Table Builder Plugin

Create and manage responsive tables with custom rows, columns, and styling.

Installation

                    javascript
                

                        const editor = new NEXEDITOR('#editor', {
    plugins: [
        {
            name: 'table',
            options: {
                maxRows: 20,
                maxColumns: 10,
                defaultRows: 3,
                defaultColumns: 3
            }
        }
    ]
});
                

Configuration Options

Option	Type	Default	Description
maxRows	number	`20`	Maximum number of rows
maxColumns	number	`10`	Maximum number of columns
defaultRows	number	`3`	Default number of rows
defaultColumns	number	`3`	Default number of columns

Features

Custom row and column count
Add/remove rows and columns
Merge cells
Table styling options
Responsive design
Header row support

Usage

Click the table button in the toolbar to insert a table.

Video Embed Plugin

Embed videos from YouTube, Vimeo, and other platforms with responsive containers.

Installation

                    javascript
                
                        const editor = new NEXEDITOR('#editor', {
    plugins: ['video']
});

Supported Platforms

YouTube - Full support for YouTube videos
Vimeo - Vimeo video embedding
Direct URLs - MP4, WebM, OGG video files

Usage

                    javascript
                

                        // YouTube URL formats supported:
// https://www.youtube.com/watch?v=VIDEO_ID
// https://youtu.be/VIDEO_ID
// https://www.youtube.com/embed/VIDEO_ID

// Vimeo URL formats supported:
// https://vimeo.com/VIDEO_ID
// https://player.vimeo.com/video/VIDEO_ID

// Direct video files:
// https://example.com/video.mp4
// https://example.com/video.webm
                

Features

Automatic platform detection
Responsive 16:9 aspect ratio
Custom dimensions
Autoplay support
Preview thumbnail

Click the video button in the toolbar to insert a video.

Other Plugins

Icon Picker

Insert icons from Bootstrap Icons and Font Awesome libraries.

                    javascript
                
                        const editor = new NEXEDITOR('#editor', {
    plugins: ['icon']
});

Special Characters

Insert special characters, symbols, and mathematical notation.

                    javascript
                
                        const editor = new NEXEDITOR('#editor', {
    plugins: ['specialCharacters']
});

Text Statistics

Real-time word count, character count, and reading time statistics.

                    javascript
                
                        const editor = new NEXEDITOR('#editor', {
    plugins: ['textStatistics']
});

Find & Replace

Advanced search and replace with regex support.

                    javascript
                
                        const editor = new NEXEDITOR('#editor', {
    plugins: ['findReplace']
});

Callout Boxes

Insert styled callout boxes for notes, warnings, tips, etc.

                    javascript
                
                        const editor = new NEXEDITOR('#editor', {
    plugins: ['callout']
});

All Plugins at Once

                    javascript
                

                        const editor = new NEXEDITOR('#editor', {
    plugins: [
        { name: 'aiContentGenerator', options: { apiKey: 'key' } },
        { name: 'autoSave', options: { interval: 30000 } },
        'emoji',
        'icon',
        'specialCharacters',
        'table',
        'video',
        'callout',
        'findReplace',
        'textStatistics'
    ]
});
                

API Methods

Complete reference of all available methods in the NEXEDITOR API.

Content Methods

Method	Parameters	Returns	Description
getContent()	—	string	Get HTML content from editor
setContent(html)	string	void	Set HTML content in editor
getTextContent()	—	string	Get plain text (no HTML tags)
clear()	—	void	Clear all content
isEmpty()	—	boolean	Check if editor is empty
insertContent(html)	string	void	Insert HTML at cursor position
appendContent(html)	string	void	Append HTML to end of content
prependContent(html)	string	void	Prepend HTML to start of content

Theme & Appearance Methods

Method	Parameters	Returns	Description
setTheme(theme)	string	void	Set theme ('light' or 'dark')
getTheme()	—	string	Get current theme
setLanguage(lang)	string	void	Set interface language
getLanguage()	—	string	Get current language
setRTL(enabled)	boolean	void	Enable/disable RTL mode
isRTL()	—	boolean	Check if RTL is enabled

Editor State Methods

Method	Parameters	Returns	Description
focus()	—	void	Focus the editor
blur()	—	void	Remove focus from editor
isFocused()	—	boolean	Check if editor is focused
enable()	—	void	Enable editor (make editable)
disable()	—	void	Disable editor (read-only)
isEnabled()	—	boolean	Check if editor is enabled
destroy()	—	void	Destroy editor instance

Code View Methods

Method	Parameters	Returns	Description
showCodeView()	—	void	Show code view
showVisualEditor()	—	void	Show visual editor
toggleCodeView()	—	void	Toggle between views
isCodeViewActive()	—	boolean	Check if code view is active

Plugin Methods

Method	Parameters	Returns	Description
getPlugin(name)	string	Plugin\|null	Get plugin instance by name
hasPlugin(name)	string	boolean	Check if plugin is loaded

Utility Methods

Method	Parameters	Returns	Description
getWordCount()	—	number	Get word count
getCharacterCount()	—	number	Get character count
getVersion()	—	string	Get NEXEDITOR version

API Events

NEXEDITOR emits various events that you can listen to for custom behavior.

Event Listener Methods

                    javascript
                

                    // Add event listener
editor.on('change', (event) => {
    console.log('Content changed:', event);
});

// Remove event listener
const handler = (event) => console.log('Event:', event);
editor.on('change', handler);
editor.off('change', handler);

// One-time event listener
editor.once('init', () => {
    console.log('Editor initialized (fires only once)');
});
                

Available Events

Event	Parameters	Description
init	editor	Fired when editor is initialized
change	content	Fired when content changes
focus	event	Fired when editor gains focus
blur	event	Fired when editor loses focus
keydown	event	Fired on keydown in editor
keyup	event	Fired on keyup in editor
paste	event	Fired when content is pasted
beforeDestroy	editor	Fired before editor is destroyed
destroy	editor	Fired when editor is destroyed

Event Examples

                    javascript
                

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

// Track content changes
editor.on('change', () => {
    const content = editor.getContent();
    console.log('New content:', content);

    // Save to localStorage
    localStorage.setItem('draft', content);
});

// Log when user focuses editor
editor.on('focus', () => {
    console.log('Editor focused at:', new Date().toISOString());
});

// Warn before closing if unsaved changes
let hasUnsavedChanges = false;
editor.on('change', () => {
    hasUnsavedChanges = true;
});

window.addEventListener('beforeunload', (e) => {
    if (hasUnsavedChanges) {
        e.preventDefault();
        e.returnValue = 'You have unsaved changes!';
    }
});

// Custom paste handler
editor.on('paste', (event) => {
    const pastedText = event.clipboardData.getData('text');
    console.log('Pasted:', pastedText);

    // You can modify or prevent default paste behavior
    // event.preventDefault();
});
                

API Properties

Read-only properties available on the NEXEDITOR instance.

Property	Type	Description
element	HTMLElement	The container element
editorElement	HTMLElement	The contenteditable element
config	object	Configuration options
plugins	Map	Map of loaded plugins
i18n	I18n	Internationalization instance
version	string	NEXEDITOR version number

Usage Example

                    javascript
                

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

// Access properties
console.log('Container:', editor.element);
console.log('Editor element:', editor.editorElement);
console.log('Config:', editor.config);
console.log('Version:', editor.version);

// Access i18n
console.log('Current language:', editor.i18n.currentLang);
console.log('Translation:', editor.i18n.t('Bold'));

// Check loaded plugins
console.log('Plugins:', editor.plugins);
editor.plugins.forEach((plugin, name) => {
    console.log('Loaded plugin:', name);
});
                

Creating Custom Plugins

NEXEDITOR provides a powerful plugin API that makes it easy to extend functionality.

Plugin Structure

                    javascript
                

                    class MyCustomPlugin {
    // Plugin metadata (required)
    static getMetadata() {
        return {
            name: 'myCustomPlugin',
            icon: '🔌',
            title: 'My Custom Plugin',
            needsToolbarButton: true
        };
    }

    // Constructor (required)
    constructor(editor, options = {}) {
        this.editor = editor;
        this.options = options;
        this.i18n = editor.i18n;  // Access translations
    }

    // Initialize plugin (optional)
    init() {
        console.log('Plugin initialized');
    }

    // Execute plugin action (required if needsToolbarButton is true)
    execute() {
        console.log('Plugin executed');
        // Your plugin logic here
        this.editor.insertContent('<p>Custom content!</p>');
    }

    // Cleanup (optional)
    destroy() {
        console.log('Plugin destroyed');
    }
}

// Register and use plugin
const editor = new NEXEDITOR('#editor', {
    plugins: [
        { name: MyCustomPlugin, options: { /* custom options */ } }
    ]
});
                

Plugin with Modal

                    javascript
                

                    class ModalPlugin {
    static getMetadata() {
        return {
            name: 'modalPlugin',
            icon: '📋',
            title: 'Modal Plugin',
            needsToolbarButton: true
        };
    }

    constructor(editor, options = {}) {
        this.editor = editor;
        this.options = options;
        this.i18n = editor.i18n;
        this.createModal();
    }

    createModal() {
        // Create modal HTML
        const modalHTML = `
            <div class="nex-modal" id="myModal">
                <div class="nex-modal-content">
                    <div class="nex-modal-header">
                        <h3>${this.i18n.t('My Modal')}</h3>
                        <button class="nex-modal-close">×</button>
                    </div>
                    <div class="nex-modal-body">
                        <input type="text" id="modalInput" placeholder="Enter text">
                    </div>
                    <div class="nex-modal-footer">
                        <button class="btn-cancel">Cancel</button>
                        <button class="btn-insert">Insert</button>
                    </div>
                </div>
            </div>
        `;

        // Add to editor container
        this.editor.element.insertAdjacentHTML('beforeend', modalHTML);
        this.modal = this.editor.element.querySelector('#myModal');

        // Setup event listeners
        this.setupEvents();
    }

    setupEvents() {
        // Close button
        this.modal.querySelector('.nex-modal-close').addEventListener('click', () => {
            this.closeModal();
        });

        // Cancel button
        this.modal.querySelector('.btn-cancel').addEventListener('click', () => {
            this.closeModal();
        });

        // Insert button
        this.modal.querySelector('.btn-insert').addEventListener('click', () => {
            const input = this.modal.querySelector('#modalInput');
            const text = input.value;

            if (text) {
                this.editor.insertContent(`<p>${text}</p>`);
                this.closeModal();
            }
        });

        // Close on outside click
        this.modal.addEventListener('click', (e) => {
            if (e.target === this.modal) {
                this.closeModal();
            }
        });
    }

    execute() {
        this.openModal();
    }

    openModal() {
        this.modal.classList.add('active');
        this.modal.querySelector('#modalInput').focus();
    }

    closeModal() {
        this.modal.classList.remove('active');
    }

    destroy() {
        if (this.modal) {
            this.modal.remove();
        }
    }
}
                

Plugin with Options

                    javascript
                

                    class ConfigurablePlugin {
    static getMetadata() {
        return {
            name: 'configurablePlugin',
            icon: '⚙️',
            title: 'Configurable Plugin',
            needsToolbarButton: true
        };
    }

    constructor(editor, options = {}) {
        this.editor = editor;

        // Merge default options with user options
        this.options = {
            prefix: 'Default:',
            uppercase: false,
            maxLength: 100,
            ...options
        };
    }

    execute() {
        let text = prompt('Enter text:');

        if (text) {
            // Apply options
            if (this.options.uppercase) {
                text = text.toUpperCase();
            }

            if (text.length > this.options.maxLength) {
                text = text.substring(0, this.options.maxLength);
            }

            const content = `<p>${this.options.prefix} ${text}</p>`;
            this.editor.insertContent(content);
        }
    }
}

// Use with custom options
const editor = new NEXEDITOR('#editor', {
    plugins: [
        {
            name: ConfigurablePlugin,
            options: {
                prefix: 'User said:',
                uppercase: true,
                maxLength: 50
            }
        }
    ]
});
                

Best Practices

Always provide metadata via getMetadata()
Use this.i18n.t() for all user-facing text
Respect editor.config.rtl for RTL layouts
Clean up resources in destroy() method
Provide default options that can be overridden

Custom Themes

Create your own themes by overriding CSS variables.

CSS Variables

                    css
                

                    /* Override theme variables */
.nex-editor {
   // Colors
--color-primary: #yourPrimaryColor;
--color-primary-dark: #yourPrimaryDarkColor;
--color-primary-light: #yourPrimaryLightColor;
--color-primary-lighter: #yourPrimaryLighterColor;
--color-primary-rgb: yourRGBValue (e.g., 102, 126, 234);

--color-accent: #yourAccentColor;
--color-accent-dark: #yourAccentDarkColor;

--color-success: #yourSuccessColor;
--color-success-dark: #yourSuccessDarkColor;
--color-success-light: #yourSuccessLightColor;

--color-warning: #yourWarningColor;
--color-warning-dark: #yourWarningDarkColor;
--color-warning-light: #yourWarningLightColor;

--color-danger: #yourDangerColor;
--color-danger-dark: #yourDangerDarkColor;
--color-danger-light: #yourDangerLightColor;

--color-info: #yourInfoColor;
--color-info-dark: #yourInfoDarkColor;
--color-info-light: #yourInfoLightColor;

// Text Colors - LIGHT THEME
--text-primary: #yourTextColor;
--text-secondary: #yourTextSecondaryColor;
--text-tertiary: #yourTextTertiaryColor;
--text-muted: #yourTextMutedColor;
--text-disabled: #yourTextDisabledColor;
--text-inverse: #yourTextInverseColor;
--text-placeholder: #yourPlaceholderColor;

// Background Colors - LIGHT THEME
--bg-surface: #yourBgColor;
--bg-surface-secondary: #yourBgSecondaryColor;
--bg-surface-tertiary: #yourBgTertiaryColor;
--bg-surface-hover: #yourBgHoverColor;
--bg-overlay: yourOverlayColor (e.g., rgba(0,0,0,0.5));

// Border Colors - LIGHT THEME
--border-color: #yourBorderColor;
--border-color-medium: #yourBorderMediumColor;
--border-color-dark: #yourBorderDarkColor;

// Spacing
--space-xs: yourValue (e.g., 0.25rem);
--space-sm: yourValue (e.g., 0.5rem);
--space: yourValue (e.g., 1rem);
--space-md: yourValue (e.g., 1.5rem);
--space-lg: yourValue (e.g., 2rem);
--space-xl: yourValue (e.g., 3rem);

// Border Radius
--radius-xs: yourValue (e.g., 0.125rem);
--radius-sm: yourValue (e.g., 0.25rem);
--radius: yourValue (e.g., 0.5rem);
--radius-md: yourValue (e.g., 0.75rem);
--radius-lg: yourValue (e.g., 1rem);
--radius-xl: yourValue (e.g., 1.5rem);

// Shadows
--shadow-xs: yourValue (e.g., 0 1px 2px rgba(0,0,0,0.05));
--shadow-sm: yourValue (e.g., 0 1px 3px rgba(0,0,0,0.1));
--shadow-md: yourValue (e.g., 0 4px 6px rgba(0,0,0,0.1));
--shadow-lg: yourValue (e.g., 0 10px 15px rgba(0,0,0,0.1));
--shadow-xl: yourValue (e.g., 0 20px 25px rgba(0,0,0,0.1));

// Typography
--font-family-base: yourFont (e.g., 'Roboto', sans-serif);
--font-family-mono: yourFont (e.g., 'Courier New', monospace);
--font-size-xs: yourValue (e.g., 0.75rem);
--font-size-sm: yourValue (e.g., 0.875rem);
--font-size-base: yourValue (e.g., 1rem);
--font-size-lg: yourValue (e.g., 1.125rem);
--font-size-xl: yourValue (e.g., 1.25rem);
--font-weight-normal: yourValue (e.g., 400);
--font-weight-medium: yourValue (e.g., 500);
--font-weight-semibold: yourValue (e.g., 600);
--font-weight-bold: yourValue (e.g., 700);

// Transitions
--transition-fast: yourValue (e.g., all 0.1s ease);
--transition: yourValue (e.g., all 0.3s ease);
--transition-slow: yourValue (e.g., all 0.5s ease);

// Component Variables - LIGHT THEME
--border-width: yourValue (e.g., 1px);
--input-bg: #yourInputBgColor;
--input-border: #yourInputBorderColor;
--input-color: #yourInputTextColor;
}
                

Complete Custom Theme Example

                    css
                

                    /* Ocean Theme */
/*
 * ========================================
 * Theme Example: Ocean
 * ========================================
 *
 * Apply this theme by adding the data-theme="ocean" attribute
 * to the main .nex-editor element.
 *
 * <div class="nex-editor" data-theme="ocean">...</div>
 *
 */

.nex-editor[data-theme="ocean"] {

    /* Main Colors (based on Cyan/Teal) */
    --color-primary: #0891b2;         /* Cyan 600 */
    --color-primary-dark: #0e7490;    /* Cyan 700 */
    --color-primary-light: #67e8f9;   /* Cyan 300 */
    --color-primary-lighter: #cffafe; /* Cyan 100 */
    --color-primary-rgb: 8, 145, 178;

    /* Accent Color (a deeper blue shade) */
    --color-accent: #0369a1;          /* Sky 700 */
    --color-accent-dark: #075985;     /* Sky 800 */

    /* Semantic colors (can remain default or be adjusted) */
    --color-success: #059669;
    --color-warning: #f59e0b;
    --color-danger: #dc2626;
    --color-info: #3b82f6;

    /* Text Colors - Ocean Theme (Light) */
    --text-primary: #0f172a;          /* Slate 900 (Main dark text) */
    --text-secondary: #0e7490;        /* Cyan 700 (Secondary text) */
    --text-tertiary: #64748b;         /* Slate 500 (Tertiary text) */
    --text-muted: #94a3b8;            /* Slate 400 */
    --text-inverse: #f8fafc;          /* Slate 50 (Text on primary bg) */

    /* Background Colors - Ocean Theme (Light) */
    --bg-surface: #f0f9ff;            /* Sky 50 (Overall background) */
    --bg-surface-secondary: #ffffff;  /* White (Editor/input background) */
    --bg-surface-tertiary: #e0f2fe;   /* Sky 100 (Slightly off-white bg) */
    --bg-surface-hover: #cffafe;      /* Cyan 100 (Hover) */

    /* Border Colors - Ocean Theme (Light) */
    --border-color: #cbd5e1;          /* Slate 300 (Subtle borders) */
    --border-color-medium: #94a3b8;   /* Slate 400 (Stronger borders) */
    --border-color-dark: #0e7490;     /* Cyan 700 (Active/focus border) */

    /* Component Variables - Ocean Theme (Light) */
    --input-bg: #ffffff;
    --input-border: #cbd5e1;
    --input-color: #0f172a;
}

                

Using Custom Theme

                    javascript
                

                    // Initialize with custom theme
const editor = new NEXEDITOR('#editor', {
    theme: 'ocean'
});

// Or set dynamically
editor.setTheme('ocean');
                

Framework Integration

React Integration

                    jsx
                

                    import React, { useEffect, useRef, useState } from 'react';
import NEXEDITOR from 'nexeditor';
import 'nexeditor/dist/nexeditor.css';

function NexEditorComponent({ initialContent, onChange }) {
    const editorRef = useRef(null);
    const instanceRef = useRef(null);

    useEffect(() => {
        // Initialize editor
        if (editorRef.current && !instanceRef.current) {
            instanceRef.current = new NEXEDITOR(editorRef.current, {
                content: initialContent,
                lang: 'en',
                theme: 'light',
                plugins: ['emoji', 'table']
            });

            // Listen for changes
            instanceRef.current.on('change', () => {
                const content = instanceRef.current.getContent();
                onChange && onChange(content);
            });
        }

        // Cleanup
        return () => {
            if (instanceRef.current) {
                instanceRef.current.destroy();
                instanceRef.current = null;
            }
        };
    }, []);

    return <div ref={editorRef} />;
}

// Usage
function App() {
    const [content, setContent] = useState('');

    return (
        <NexEditorComponent
            initialContent="<h1>Hello React!</h1>"
            onChange={setContent}
        />
    );
}
                

Vue.js Integration

                    vue
                

                    <template>
  <div ref="editor"></div>
</template>

<script>
import NEXEDITOR from 'nexeditor';
import 'nexeditor/dist/nexeditor.css';

export default {
  name: 'NexEditor',
  props: {
    modelValue: String,
    config: Object
  },
  emits: ['update:modelValue'],
  mounted() {
    this.editor = new NEXEDITOR(this.$refs.editor, {
      content: this.modelValue,
      ...this.config
    });

    this.editor.on('change', () => {
      const content = this.editor.getContent();
      this.$emit('update:modelValue', content);
    });
  },
  beforeUnmount() {
    if (this.editor) {
      this.editor.destroy();
    }
  },
  watch: {
    modelValue(newValue) {
      if (this.editor && newValue !== this.editor.getContent()) {
        this.editor.setContent(newValue);
      }
    }
  }
};
</script>

<!-- Usage -->
<template>
  <NexEditor
    v-model="content"
    :config="{ theme: 'light', lang: 'en' }"
  />
</template>
                

Angular Integration

                    typescript
                

                    import { Component, ElementRef, Input, Output, EventEmitter, ViewChild, AfterViewInit, OnDestroy } from '@angular/core';
import NEXEDITOR from 'nexeditor';

@Component({
  selector: 'app-nexeditor',
  template: '<div #editorElement></div>',
  styleUrls: ['./nexeditor.component.css']
})
export class NexEditorComponent implements AfterViewInit, OnDestroy {
  @ViewChild('editorElement') editorElement!: ElementRef;
  @Input() content: string = '';
  @Input() config: any = {};
  @Output() contentChange = new EventEmitter<string>();

  private editor: any;

  ngAfterViewInit() {
    this.editor = new NEXEDITOR(this.editorElement.nativeElement, {
      content: this.content,
      ...this.config
    });

    this.editor.on('change', () => {
      const content = this.editor.getContent();
      this.contentChange.emit(content);
    });
  }

  ngOnDestroy() {
    if (this.editor) {
      this.editor.destroy();
    }
  }
}

// Usage in component
<app-nexeditor
  [content]="myContent"
  [config]="{ theme: 'light', lang: 'en' }"
  (contentChange)="onContentChange($event)"
></app-nexeditor>
                

FAQ

Does NEXEDITOR require jQuery?

No! NEXEDITOR is built with pure vanilla JavaScript and has zero external dependencies. It works standalone without jQuery or any other library.

Can I use NEXEDITOR in a commercial project?

Yes! With a Regular License ($49), you can use NEXEDITOR in a single end product. For SaaS or applications where end users are charged, you need an Extended License ($249).

How do I get an API key for the AI plugin?

You need an OpenAI API key. Sign up at platform.openai.com and generate an API key in your account dashboard. Note that API usage will be charged according to OpenAI's pricing.

Is NEXEDITOR mobile-friendly?

Yes! NEXEDITOR is fully responsive and works perfectly on mobile devices, tablets, and desktops. The toolbar adapts to smaller screens automatically.

Can I create my own plugins?

Absolutely! NEXEDITOR has a well-documented plugin API. Check the Creating Custom Plugins section for detailed guides and examples.

How do I add a custom language?

Use the i18n.addTranslation() method to add custom translations. See the Localization section for details.

Can I customize the toolbar?

Yes! You can customize which buttons appear in the toolbar by passing a toolbar array in the configuration. See the Toolbar section.

Does NEXEDITOR support RTL languages?

Yes! NEXEDITOR has full RTL (right-to-left) support for languages like Arabic, Hebrew, Persian, and Urdu. Enable it with rtl: true in the config.

How do I integrate with a form?

Use a hidden input field and sync the editor content on form submit. See the Content Management section for a complete example.

Can I use NEXEDITOR with React/Vue/Angular?

Yes! Check out the Framework Integration section for ready-to-use examples for React, Vue, and Angular.

Troubleshooting

Editor not initializing

Problem: Editor doesn't appear or throws an error

Solutions:

Check that the CSS file is loaded: <link rel="stylesheet" href="nexeditor.css">
Verify the JavaScript file is loaded: <script src="nexeditor.umd.js">
Make sure the target element exists in the DOM before initialization
Check browser console for error messages

Plugins not loading

Problem: Plugins don't appear in toolbar or throw errors

Solutions:

Verify plugin names are spelled correctly (case-sensitive)
Check that plugins are properly configured with options if required
Ensure plugin files are included if using custom plugins
Check console for plugin initialization errors

Content not saving

Problem: Form submits but content is empty

Solutions:

Sync editor content to hidden input before form submit
Use editor.getContent() to retrieve current content
Check that form is not submitting before content is synced
Verify the hidden input has the correct name attribute

Styling conflicts

Problem: Editor styles look broken or conflict with site CSS

Solutions:

Load NEXEDITOR CSS after your site's CSS
Use more specific CSS selectors if needed
Check for CSS reset styles affecting the editor
Use browser dev tools to identify conflicting styles

Performance issues

Problem: Editor is slow or laggy

Solutions:

Reduce the number of plugins loaded
Disable plugins you don't need
Avoid loading too many editor instances on one page
Check for memory leaks (destroy editors when not needed)

Still having issues? Contact support through your Codester purchase page. Include:

NEXEDITOR version
Browser and version
Console error messages
Minimal code example reproducing the issue

Changelog

Version 1.0.0 (2024-11-06)

Initial Release

Core WYSIWYG editor with zero dependencies
Complete toolbar with 15+ formatting options
Code View with syntax highlighting
i18n system with 20+ languages
Full RTL support
Light and Dark themes
10+ premium plugins included
AI Content Generator plugin (GPT-4)
Auto Save plugin
Emoji Picker (1000+ emojis)
Table Builder
Video Embed
Icon Picker
Special Characters
Text Statistics
Find & Replace
Callout Boxes
Complete API documentation
React/Vue/Angular integration examples

Thank you for choosing NEXEDITOR! We're committed to providing regular updates and excellent support. Stay tuned for new features and improvements!