Toolbar Reference

🔧 Toolbar Reference

Complete reference for every toolbar button. Use button identifiers in the toolbar config array to build your layout.

---

🧭 How the Toolbar Config Works

new NeikiEditor('#editor', {
    toolbar: [
        'bold', 'italic', '|',       // '|' = visual separator + wrapping group boundary
        'insertDropdown', '|',
        'moreMenu'
    ]
});

• Use '|' between groups for visual clarity
• Groups of buttons between separators wrap together as units on narrow screens
• Plugin buttons are referenced by their registered name
• Omit any button to exclude it from the toolbar

---

✍️ Text Formatting

Basic inline formatting commands.

Identifier	Description	Shortcut
bold	Toggle bold (<strong>)	Ctrl+B
italic	Toggle italic (<em>)	Ctrl+I
underline	Toggle underline (<u>)	Ctrl+U
strikethrough	Toggle strikethrough (<s>)	—
subscript	Toggle subscript (<sub>)	—
superscript	Toggle superscript (<sup>)	—
code	Toggle inline <code> or <pre><code> block	—
removeFormat	Strip all formatting from selection	—

[!NOTE]
When no text is selected, formatting commands auto-expand to the word at the cursor. You can bold a word by clicking inside it — no manual selection required.

---

🎨 Text Style

Dropdowns and pickers for typography and color.

Identifier	Type	Description
heading	Select	Paragraph, H1–H6. Always defaults to "Paragraph" — never shows blank.
fontSize	Widget	Custom size widget: [−] / [+] buttons, text input, and preset dropdown (8–96px)
fontFamily	Select	Sans Serif (Arial), Serif (Georgia), Monospace (Consolas), Cursive (Comic Sans MS)
foreColor	Color picker	Text color — preset palette, native color input, hex input
backColor	Color picker	Background highlight — same picker controls as foreColor

Font Size Widget

The fontSize item renders a custom interactive widget rather than a plain dropdown:

• [−] — decrease by 1px
• Text input — shows current size; type a custom value and press Enter
• [+] — increase by 1px
• Dropdown — click the input to choose from presets: 8, 9, 10, 11, 12, 14, 18, 24, 30, 36, 48, 60, 72, 96

[!NOTE]
The font size widget preserves your text selection when clicking +/− or choosing a preset.

Color Picker Details

Both foreColor and backColor open a picker with:

• A grid of preset web colors
• A Reset swatch to remove the applied color
• A native color input (browser color dialog)
• A hex input — type any #rrggbb and press Enter or click Apply

The native color input and hex input stay in sync.

[!TIP]
On mobile, the color picker automatically adjusts its alignment to stay within the viewport.

---

📐 Alignment & Lists

Identifier	Description
alignLeft	Align left
alignCenter	Center-align
alignRight	Align right
alignJustify	Justify (stretch to fill line width)
bulletList	Toggle unordered (bulleted) list
numberedList	Toggle ordered (numbered) list
indent	Increase indentation level
outdent	Decrease indentation level

[!NOTE]
Tab and Shift+Tab also work for indent/outdent when the cursor is inside the editor.

---

🔗 Insert Dropdown

Identifier	Description
insertDropdown	Opens a dropdown containing all insert actions (see below)

The insertDropdown groups all insert-related actions into a single Insert button:

Action	Description
Link	Insert or edit a hyperlink. Wraps selection or inserts at cursor.
Image	Insert image by URL, file upload, or drag & drop
Video	Insert video by URL or file upload
Table	Create a table (set rows, columns, optional header row)
Emoji	Open emoji picker grid
Special Characters	Open special characters picker grid

Individual Insert Buttons

These can also be added as standalone buttons:

Identifier	Description
blockquote	Toggle blockquote on the current block
horizontalRule	Insert a horizontal rule (<hr>)

Image Dialog

The image insert dialog supports:

• URL input — paste any image URL
• File picker — select one or multiple files
• Drag & drop — drag files into the dialog's upload area

Without imageUploadHandler, files are embedded as base64. With the handler, files are uploaded and inserted as URLs.

Video Dialog

• URL input — paste any video URL
• File upload — embeds as base64 or uploads via videoUploadHandler

Inserted videos render as <video controls> and can be resized/repositioned like images.

---

🛠️ Tools

Identifier	Description	Shortcut
undo	Undo last action	Ctrl+Z
redo	Redo last undone action	Ctrl+Y / Ctrl+Shift+Z
findReplace	Open Find & Replace bar with regex support	—
viewCode	Toggle formatted HTML source view with syntax highlighting	—

Find & Replace Features

Feature	Description
Search field	Type text to find
Replace field	Type replacement text
Case Sensitive	Toggle — when active, Hello ≠ hello
Regex Mode	Toggle — enables JS RegExp patterns
Find Next	Jump to next match (highlighted)
Replace	Replace current highlighted match
Replace All	Replace every occurrence at once

Useful regex patterns:

Pattern	Matches
\b\w+\b	Every word
\d{4}	4-digit numbers
https?://\S+	URLs
<em>.*?</em>	Italic-wrapped text

---

⋯ More Menu

The moreMenu button renders a ⋯ at the right edge of the toolbar. It contains:

Item	Description
Save	Triggers the onSave callback (also: Ctrl+S)
Preview	Opens a preview modal with rendered content
Download	Downloads editor content as an .html file
Print	Opens the browser's print dialog
Autosave	Toggle autosave to localStorage
Clear all	Clear all content (styled red — destructive)
Change theme	Select Light, Dark, Blue, or Dark Blue
Fullscreen	Toggle fullscreen editing mode
Help	Show help modal (author, version, GitHub link)

[!TIP]
You can hide the Help item with showHelp: false in config.

---

📝 Floating Toolbar

The floating toolbar appears automatically when text is selected — it is always enabled and cannot be configured.

Position	Buttons	Description
Left	▲ ▼	Move current block up / down
Right	B I U S 🔗	Bold, Italic, Underline, Strikethrough, Insert Link

When an image is selected, the floating toolbar is replaced by the image-specific toolbar (Drag, Replace, Delete).

---

🏗️ Toolbar Examples

Minimal — Writing-focused

toolbar: [
    'bold', 'italic', 'underline', '|',
    'heading', '|',
    'bulletList', 'numberedList', '|',
    'insertDropdown', '|',
    'moreMenu'
]

Standard — Balanced

toolbar: [
    'undo', 'redo', '|',
    'bold', 'italic', 'underline', 'strikethrough', 'removeFormat', '|',
    'heading', 'fontSize', '|',
    'foreColor', 'backColor', '|',
    'alignLeft', 'alignCenter', 'alignRight', '|',
    'bulletList', 'numberedList', '|',
    'insertDropdown', '|',
    'moreMenu'
]

Full-Featured (Default)

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

---

🔗 Related Pages

⚙️ Configuration	All config options
🔌 Plugin API	Add custom toolbar buttons via plugins
🧩 Advanced Features	Detailed feature documentation

---

_{← Back to Home}