BarnamenevisEditor Documentation

Installation

Include the required files in your HTML:

<!-- CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css" rel="stylesheet">
<link href="css/BarnamenevisEditor.css" rel="stylesheet">

<!-- JavaScript -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="js/BarnamenevisEditor.js"></script>
<script src="js/lang/en.js"></script>

Basic Usage

Initialize the editor on a textarea element:

<textarea id="myEditor">Initial content</textarea>

<script>
$(document).ready(function() {
    $('#myEditor').barnamenevisEditor({
        language: 'en'
    });
});
</script>

Configuration Options

Customize the editor with various options:

Example Configuration:

$('#myEditor').barnamenevisEditor({
    height: '600px',
    language: 'en',
    toolbar: 'full',
    onChange: function(content) {
        console.log('Content changed:', content);
    },
    onInit: function(editor) {
        console.log('Editor initialized:', editor);
    }
});

Methods

Available methods to interact with the editor:

var html = $('#myEditor').barnamenevisEditor('getContent');

$('#myEditor').barnamenevisEditor('setContent', '<p>New content</p>');

var text = $('#myEditor').barnamenevisEditor('getText');

$('#myEditor').barnamenevisEditor('clear');

$('#myEditor').barnamenevisEditor('destroy');

$('#myEditor').barnamenevisEditor('focus');

$('#myEditor').barnamenevisEditor('disable');

$('#myEditor').barnamenevisEditor('enable');

Events

Listen to editor events:

$('#myEditor').on('barnameneviseditor.change', function(e, content) {
    console.log('Changed:', content);
});

$('#myEditor').on('barnameneviseditor.init', function(e, editor) {
    console.log('Initialized');
});

$('#myEditor').on('barnameneviseditor.focus', function() {
    console.log('Focused');
});

$('#myEditor').on('barnameneviseditor.blur', function() {
    console.log('Blurred');
});

Toolbar Options

Customize the toolbar with preset configurations or custom buttons:

Preset Configurations:

• 'full' - All available buttons (default)
• 'basic' - Essential formatting buttons only
• 'minimal' - Minimal set of buttons

Custom Toolbar:

$('#myEditor').barnamenevisEditor({
    language: 'en',
    toolbar: [
        ['bold', 'italic', 'underline'],
        ['fontname', 'fontsize'],
        ['forecolor', 'backcolor'],
        ['insertLink', 'insertImage'],
        ['undo', 'redo']
    ]
});

Available Toolbar Buttons:

Localization

BarnamenevisEditor ships with English (en) and Persian (fa). Adding more languages is straightforward:

1. Load Language Files

Load the language file(s) after js/BarnamenevisEditor.js:

<script src="js/BarnamenevisEditor.js"></script>
<script src="js/lang/en.js"></script>
<script src="js/lang/fa.js"></script>

2. Initialize with Language

$('#editor').barnamenevisEditor({
    language: 'fa'  // or 'en'
});

3. Create New Translations

Copy js/lang/en.js and update the language code:

(function () {
    window.BarnamenevisEditor = window.BarnamenevisEditor || {};
    window.BarnamenevisEditor.lang = window.BarnamenevisEditor.lang || {};

    window.BarnamenevisEditor.lang.ar = {
        toolbar: {
            undo: 'تراجع (Ctrl+Z)',
            redo: 'إعادة (Ctrl+Y)',
            // … more toolbar strings
        },
        modal: {
            insertLink: 'إدراج رابط',
            // … more modal strings
        },
        statusBar: {
            words: 'كلمات',
            word: 'كلمة',
            characters: 'أحرف',
            character: 'حرف'
        },
        messages: {
            enterUrl: 'الرجاء إدخال عنوان URL'
        },
        placeholder: 'ابدأ الكتابة...'
    };
})();

Custom Fonts

BarnamenevisEditor can show any font in the dropdown—system fonts, local @font-face, or Google Fonts.

Basic Setup

1. Load the font (CSS @font-face, external stylesheet, or Google Fonts link)
2. Provide the font list via fontFamilies. When specified, your list replaces the defaults entirely.
3. Use object format to show localized names or include fallbacks

Example: Custom Fonts with Display Names

$('#editor').barnamenevisEditor({
    language: 'en',
    fontFamilies: [
        'Arial',
        'Georgia',
        { displayName: 'میخک (Mikhak)', value: 'Mikhak, Tahoma, sans-serif' },
        { displayName: 'Roboto', value: 'Roboto, Arial, sans-serif' }
    ]
});

Example: Persian Editor with Custom Fonts

<!-- Load Persian fonts -->
<link rel="stylesheet" href="fonts/mikhak/Mikhak.css">
<link rel="stylesheet" href="fonts/sahel/Sahel.css">
<link rel="stylesheet" href="fonts/vazir/Vazirmatn.css">

<script>
$('#persianEditor').barnamenevisEditor({
    language: 'fa',
    fontFamilies: [
        'Tahoma',
        'Arial',
        { displayName: 'میخک (Mikhak)', value: 'Mikhak, Tahoma, sans-serif' },
        { displayName: 'ساحل (Sahel)', value: 'Sahel, Tahoma, sans-serif' },
        { displayName: 'وزیر (Vazir)', value: 'Vazirmatn, Tahoma, sans-serif' }
    ]
});
</script>

Styling & Themes

BarnamenevisEditor supports multiple themes and custom styling:

Dark Mode:

Toggle dark mode by adding the theme-dark class to the editor wrapper:

// Enable dark mode
$('.custom-editor-wrapper').addClass('theme-dark');

// Toggle dark mode
$('.custom-editor-wrapper').toggleClass('theme-dark');

// Full page dark mode
$('body').addClass('dark-mode');
$('.custom-editor-wrapper').addClass('theme-dark');

Custom Styling:

Override CSS classes to customize appearance:

.custom-editor-wrapper {
    border: 2px solid #007bff;
    border-radius: 8px;
}

.custom-editor-toolbar {
    background: linear-gradient(to right, #667eea 0%, #764ba2 100%);
}

.custom-editor-content {
    font-family: 'Georgia', serif;
    font-size: 16px;
}

Keyboard Shortcuts

BarnamenevisEditor supports standard keyboard shortcuts for common editing tasks:

Code Examples

Example 1: Basic Editor

<textarea id="editor1"></textarea>

<script>
$('#editor1').barnamenevisEditor({ language: 'en' });
</script>

Example 2: Editor with Custom Height

$('#editor2').barnamenevisEditor({
    height: '300px',
    toolbar: 'basic',
    language: 'en'
});

Example 3: Editor with Change Callback

$('#editor3').barnamenevisEditor({
    language: 'en',
    onChange: function(content) {
        $('#preview').html(content);
    }
});

Example 4: Multiple Editors

$('.editor').each(function() {
    $(this).barnamenevisEditor({
        height: '250px',
        toolbar: 'minimal',
        language: 'en'
    });
});

Example 5: Get and Set Content

// Get content
var html = $('#editor5').barnamenevisEditor('getContent');
console.log(html);

// Set content
$('#editor5').barnamenevisEditor('setContent', '<h1>Hello World</h1>');

// Get plain text
var text = $('#editor5').barnamenevisEditor('getText');
console.log(text);

Troubleshooting

Common issues and solutions:

Browser Support

BarnamenevisEditor works on all modern browsers without polyfills: