BarnamenevisEditor Full-featured WYSIWYG Editor Examples

Basic Editor

A simple editor with all default settings.

$('#example1').barnamenevisEditor();

Minimal Toolbar

An editor configured with the 'minimal' toolbar preset.

$('#example2').barnamenevisEditor({
    toolbar: 'minimal',
    height: '250px'
});

Live Preview

Use the 'onChange' callback to create a live preview panel.

Preview:

$('#example3').barnamenevisEditor({
    height: '250px',
    onChange: function(content) {
        $('#preview3').html(content);
    }
});

Custom Toolbar

Define a custom toolbar by passing an array of button groups.

$('#example4').barnamenevisEditor({
    height: '250px',
    toolbar: [
        ['bold', 'italic', 'underline'],
        ['forecolor', 'backcolor'],
        ['insertLink'],
        ['undo', 'redo']
    ]
});

Blog Post Editor

A full-featured editor ideal for creating rich blog content.

Post Title:

Content:

$('#example5').barnamenevisEditor({
    height: '400px',
    toolbar: 'full'
});

$('#saveBlogPost').on('click', function() {
    var title = $('#postTitle').val();
    var content = $('#example5').barnamenevisEditor('getContent');
    // In a real app, you would send this data to a server.
    alert('Blog Post Saved! Check the console for the data.');
    console.log({ title: title, content: content });
});

Email Composer

A simple setup for writing emails.

To:

Subject:

Message:

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

Comment Box

A compact editor for leaving comments.

Comments:

$('#example7').barnamenevisEditor({
    height: '150px',
    toolbar: 'minimal'
});

$('#postComment').on('click', function() {
    var comment = $('#example7').barnamenevisEditor('getContent');
    $('#commentsDisplay').append(
        '<div class="alert alert-secondary">' + comment + '</div>'
    );
    $('#example7').barnamenevisEditor('clear');
});

Read-Only Mode

Dynamically enable and disable the editor.

// Initialize editor
var editor = $('#example8').barnamenevisEditor();

// Disable on load
editor.barnamenevisEditor('disable');

// Toggle edit mode
var isEnabled = false;
$('#toggleEdit').on('click', function() {
    isEnabled = !isEnabled;
    if (isEnabled) {
        editor.barnamenevisEditor('enable');
        $(this).html('<i class="bi bi-slash-circle"></i> Disable Edit Mode').removeClass('btn-warning').addClass('btn-secondary');
    } else {
        editor.barnamenevisEditor('disable');
        $(this).html('<i class="bi bi-pencil-fill"></i> Enable Edit Mode').removeClass('btn-secondary').addClass('btn-warning');
    }
});

Dark Theme

Apply the built-in dark theme for a different look.

$('#example9').barnamenevisEditor({
    height: '200px',
    theme: 'dark'
});

Form Integration

The editor automatically updates the original textarea inside a form.

// Initialize the editor
$('#example10').barnamenevisEditor({ height: '250px' });

// Handle form submission
$('#contentForm').on('submit', function(e) {
    e.preventDefault();
    // The textarea is automatically updated, so form submission works as expected.
    var formData = $(this).serializeArray();
     $('#formResult').html(
        '<div class="alert alert-success">Form submitted! Check console for data.</div>'
    );
    console.log(formData);
});

RTL Language Support

An example in Persian with RTL layout and custom fonts.

// Include Persian language file
<script src="js/lang/fa.js"></script>
// Load custom Persian fonts via CSS
<link rel="stylesheet" href="fonts/vazir/Vazirmatn.css">

// Initialize with Persian language and custom fonts
$('#example11').barnamenevisEditor({
    language: 'fa',
    height: '400px',
    toolbar: 'full',
    fontFamilies: [
        'Arial', // Default
        { displayName: 'وزیر (Vazir)', value: 'Vazirmatn, sans-serif' }
    ]
});