Configuration

⚙️ Configuration

Neiki Editor is fully configurable. Pass an options object as the second argument to customize behavior, appearance, and toolbar layout.

---

📋 Basic Usage

const editor = new NeikiEditor('#editor', {
    // your options here
});

Note

All options are optional. The editor works with zero configuration out of the box.

---

📊 Options Reference

Option	Type	Default	Description
placeholder	string	'Start typing...'	Placeholder text shown when editor is empty
minHeight	number	300	Minimum editor height in pixels
maxHeight	number|null	null	Maximum height in pixels (enables scroll when exceeded)
autofocus	boolean	false	Automatically focus the editor on initialization
spellcheck	boolean	true	Enable browser spellcheck
readonly	boolean	false	Make editor read-only (content is visible but not editable)
theme	string	'light'	Initial theme — 'light' or 'dark'
language	string	'en'	UI language — 'en' (English) or 'cs' (Czech)
toolbar	array	(see below)	Array of toolbar button identifiers
onChange	function|null	null	Callback fired on every content change
onSave	function|null	null	Callback fired on save (Ctrl+S or More menu → Save)
onFocus	function|null	null	Callback fired when editor gains focus
onBlur	function|null	null	Callback fired when editor loses focus
onReady	function|null	null	Callback fired once the editor is fully initialized

---

🔧 Detailed Option Descriptions

placeholder

Displayed as ghost text when the editor is empty. Disappears as soon as the user starts typing.

new NeikiEditor('#editor', {
    placeholder: 'Write your article here...'
});

---

minHeight / maxHeight

Control the editor's vertical size. When maxHeight is set, the content area becomes scrollable.

new NeikiEditor('#editor', {
    minHeight: 200,
    maxHeight: 600
});

Tip

Set maxHeight: null (default) for an editor that grows with its content without a scroll limit.

---

theme

Set the initial color theme. The user can toggle themes at runtime using the themeToggle toolbar button.

new NeikiEditor('#editor', {
    theme: 'dark'
});

The chosen theme persists across page reloads via localStorage.

Important

If the user has previously toggled the theme, the persisted value overrides the theme config option. This ensures user preference is always respected.

---

language

Set the UI language for all toolbar tooltips, modal dialogs, status bar texts, and system messages.

new NeikiEditor('#editor', {
    language: 'cs'  // Czech UI
});

Currently supported languages:

• 'en' — English (default)
• 'cs' — Czech

---

toolbar

An array defining which buttons appear in the toolbar and in what order. Use '|' as a visual separator.

new NeikiEditor('#editor', {
    toolbar: [
        'viewCode', 'undo', 'redo', 'findReplace', '|',
        'bold', 'italic', 'underline', '|',
        'heading', 'fontSize', '|',
        'insertDropdown', '|',
        'moreMenu'
    ]
});

Default Toolbar

[
    'viewCode', 'undo', 'redo', 'findReplace', '|',
    'bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'removeFormat', '|',
    'heading', 'fontFamily', 'fontSize', '|',
    'foreColor', 'backColor', '|',
    'alignLeft', 'alignCenter', 'alignRight', 'alignJustify', '|',
    'indent', 'outdent', '|',
    'bulletList', 'numberedList', 'blockquote', 'horizontalRule', '|',
    'insertDropdown', '|',
    'moreMenu'
]

The insertDropdown item consolidates Link, Image, Table, Emoji, and Symbol into a single dropdown button. The moreMenu item provides Save, Preview, Download, Print, Autosave, Clear all, Toggle Theme, and Fullscreen in a dropdown pushed to the right edge of the toolbar.

Note

You can still use standalone toolbar items like link, image, table, emoji, specialChars, fullscreen, themeToggle, autosave, print directly in the toolbar array if you prefer individual buttons.

For a complete list of all buttons, see Toolbar Reference.

---

onChange

Called every time the editor content changes. Receives the HTML content string and the editor instance.

new NeikiEditor('#editor', {
    onChange: function(content, editor) {
        console.log('New content:', content);
        document.getElementById('preview').innerHTML = content;
    }
});

Tip

For auto-saving to a server, wrap your save logic in a debounce function to avoid excessive requests:

onChange: debounce(function(content) {
    fetch('/api/save', {
        method: 'POST',
        body: JSON.stringify({ content })
    });
}, 2000)

---

onSave

Called when the user presses Ctrl+S or clicks Save in the More menu (⋯). Receives the HTML content string and the editor instance.

new NeikiEditor('#editor', {
    onSave: function(content, editor) {
        fetch('/api/save', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ content })
        });
    }
});

Tip

Unlike onChange, onSave is triggered only on explicit user action (keyboard shortcut or menu), making it ideal for save-to-server logic without needing debounce.

---

onReady

Called once when the editor has finished initializing. Useful for setup tasks that depend on the editor being ready.

new NeikiEditor('#editor', {
    onReady: function(editor) {
        console.log('Editor is ready!');
        editor.focus();
    }
});

---

readonly

When true, the editor displays content in the styled editor UI but prevents any editing.

new NeikiEditor('#editor', {
    readonly: true
});

---

🏗️ Full Configuration Example

const editor = new NeikiEditor('#editor', {
    placeholder: 'Start writing your blog post...',
    minHeight: 400,
    maxHeight: 800,
    autofocus: true,
    spellcheck: true,
    readonly: false,
    theme: 'light',
    toolbar: [
        'viewCode', 'undo', 'redo', 'findReplace', '|',
        'bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'removeFormat', '|',
        'heading', 'fontFamily', 'fontSize', '|',
        'foreColor', 'backColor', '|',
        'alignLeft', 'alignCenter', 'alignRight', 'alignJustify', '|',
        'indent', 'outdent', '|',
        'bulletList', 'numberedList', 'blockquote', 'horizontalRule', '|',
        'insertDropdown', '|',
        'moreMenu'
    ],
    onChange: function(content, editor) {
        console.log('Content length:', content.length);
    },
    onSave: function(content, editor) {
        console.log('Save triggered');
    },
    onReady: function(editor) {
        console.log('Neiki Editor v2.3.0 initialized');
    }
});

---

🔗 Related Pages

• 🔧 Toolbar Reference — All available toolbar buttons
• 🔌 Plugin API — Extend the editor with custom functionality
• 🧩 Advanced Features — Themes, autosave, tables, and more

---

_{← Back to Home}