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'
toolbar	array	(see below)	Array of toolbar button identifiers
onChange	function|null	null	Callback fired on every content change
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.

---

toolbar

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

new NeikiEditor('#editor', {
    toolbar: [
        'undo', 'redo', '|',
        'bold', 'italic', 'underline', '|',
        'heading', 'fontSize', '|',
        'link', 'image', 'table', '|',
        'fullscreen', 'themeToggle', 'print'
    ]
});

Default Toolbar

[
    'undo', 'redo', '|',
    'bold', 'italic', 'underline', 'strikethrough', '|',
    'heading', 'fontSize', 'fontFamily', '|',
    'foreColor', 'backColor', '|',
    'alignLeft', 'alignCenter', 'alignRight', 'alignJustify', '|',
    'bulletList', 'numberedList', '|',
    'indent', 'outdent', '|',
    'link', 'image', 'table', '|',
    'blockquote', 'viewCode', 'horizontalRule', '|',
    'subscript', 'superscript', 'removeFormat', '|',
    'findReplace', 'emoji', 'specialChars', '|',
    'fullscreen', 'themeToggle', 'print'
]

Note

The autosave button is not included in the default toolbar. Add it manually if you want autosave functionality. See the Advanced Features page.

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)

---

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: [
        'undo', 'redo', '|',
        'bold', 'italic', 'underline', 'strikethrough', '|',
        'heading', 'fontSize', 'fontFamily', '|',
        'foreColor', 'backColor', '|',
        'alignLeft', 'alignCenter', 'alignRight', 'alignJustify', '|',
        'bulletList', 'numberedList', '|',
        'indent', 'outdent', '|',
        'link', 'image', 'table', '|',
        'blockquote', 'viewCode', 'horizontalRule', '|',
        'subscript', 'superscript', 'removeFormat', '|',
        'findReplace', 'emoji', 'specialChars', '|',
        'fullscreen', 'themeToggle', 'print'
    ],
    onChange: function(content, editor) {
        console.log('Content length:', content.length);
    },
    onReady: function(editor) {
        console.log('Neiki Editor v2.0.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}