Configuration

⚙️ Configuration

Neiki's 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). When null, the toolbar uses position: sticky to stay visible while scrolling.
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, cs, zh, es, de, fr, pt, ja
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
showHelp	boolean	true	Show Help button in More menu (⋯)
imageUploadHandler	function|null	null	Async callback (file) => Promise<url> for uploading images to a server/CDN instead of base64

---

🔧 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. In this mode, the toolbar uses position: sticky to remain visible at the top of the viewport while scrolling long content.

---

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
});

Built-in languages:

• 'en' — English (default)
• 'cs' — Czech
• 'zh' — Chinese
• 'es' — Spanish
• 'de' — German
• 'fr' — French
• 'pt' — Portuguese
• 'ja' — Japanese

---

translations

Pass custom translations directly in config. Keys you provide are merged with built-in ones — you only need to override what you want.

new NeikiEditor('#editor', {
    language: 'de',
    translations: {
        de: {
            'toolbar.bold': 'Fett (Strg+B)',
            'toolbar.italic': 'Kursiv (Strg+I)',
            // English is used as fallback for missing keys
        }
    }
});

You can also register translations globally using the static method:

NeikiEditor.addTranslation('de', {
    'toolbar.bold': 'Fett (Strg+B)',
    'toolbar.italic': 'Kursiv (Strg+I)',
});

const editor = new NeikiEditor('#editor', { language: 'de' });

---

imageUploadHandler

An async function that receives a File object and returns a Promise<string> resolving to the image URL. When provided, all image insertions (file upload dialog, drag & drop, clipboard paste) use this handler instead of embedding base64 data.

new NeikiEditor('#editor', {
    imageUploadHandler: async (file) => {
        const formData = new FormData();
        formData.append('image', file);

        const response = await fetch('/api/upload', {
            method: 'POST',
            body: formData
        });

        const data = await response.json();
        return data.url; // e.g. 'https://cdn.example.com/images/photo.jpg'
    }
});

When imageUploadHandler is set:

• The image dialog accepts multiple files — each file is uploaded sequentially via the handler
• Drag & drop images are uploaded via the handler instead of being converted to base64
• Clipboard paste images are uploaded via the handler
• The dialog hint text changes to "Will be uploaded via handler"

When imageUploadHandler is null (default):

• Single file uploads are converted to base64 (existing behavior)
• Multiple file uploads are each converted to base64 and inserted sequentially
• Clipboard pasted images are converted to base64

Tip

Using imageUploadHandler is strongly recommended for production. It keeps the HTML content lightweight and allows browsers to cache images efficiently.

---

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, Fullscreen, and Help 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
});

---

showHelp

Controls whether the Help button appears in the More menu (⋯). When clicked, it opens a modal with logo, author, version, and links to GitHub and documentation.

new NeikiEditor('#editor', {
    showHelp: false  // hide Help from More menu
});

---

🏗️ 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's Editor v2.9.2 initialized');
    },
    showHelp: true,
    imageUploadHandler: null // set to async (file) => url for server uploads
});

---

🔗 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}