Skip to content

Toolbar Reference

Jump to bottom
neikiri edited this page Apr 14, 2026 · 11 revisions

🔧 Toolbar Reference

Complete reference for all toolbar buttons available in Neiki Editor. Use the toolbar array in your config to pick and arrange buttons.

🧭 How Toolbar Config Works

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

Tip

You can include any combination of buttons in any order. Use '|' between groups for visual clarity. Groups of buttons between separators wrap as whole units on smaller screens.

✍️ Text Formatting

Basic text formatting commands.

Button Icon Description Shortcut
bold B Toggle bold Ctrl+B
italic I Toggle italic Ctrl+I
underline U Toggle underline Ctrl+U
strikethrough S Toggle strikethrough —
subscript X₂ Toggle subscript —
superscript X² Toggle superscript —
removeFormat T̸ Remove all formatting from selection —

Note

When no text is selected, formatting commands (including Remove Formatting) automatically expand to the word at the cursor position. This means you can place your cursor inside a word and apply bold, italic, etc. without manually selecting the word first.

🎨 Text Style

Dropdowns, widgets and pickers for styling text.

Button Type Description
heading Select Paragraph, H1, H2, H3, H4, H5, H6. Always defaults to Paragraph — never shows empty.
fontSize Widget Font size widget with [−] / [+] buttons, text input, and dropdown of presets: 8, 9, 10, 11, 12, 14, 18, 24, 30, 36, 48, 60, 72, 96
fontFamily Select Sans Serif (Arial), Serif (Georgia), Monospace (Consolas), Cursive (Comic Sans MS)
foreColor Color Picker Text color — palette, native color input, hex code input
backColor Color Picker Background color — palette, native color input, hex code input

Font Size Widget

The fontSize toolbar item renders a custom widget instead of a simple dropdown:

  • [−] button — decrease size by 1px
  • Text input — shows current size, type a custom value and press Enter
  • [+] button — increase size by 1px
  • Dropdown — click the input to show preset sizes

Note

The font size widget preserves your text selection when clicking the +/− buttons or selecting a preset size from the dropdown.

Color Picker Details

The color picker provides:

  • A grid of preset colors covering standard web colors
  • A "Reset" swatch to remove the applied color and return to default
  • Native color input — opens the browser's built-in color picker for precise selection
  • Hex code input — type any #rrggbb value and press Enter or click Apply

The native color input and hex input are synced — changing one updates the other.

Tip

Click outside the color picker or select a color to close it. On mobile, the picker automatically adjusts its alignment to stay within the viewport.

📐 Alignment & Lists

Control text alignment, lists, and indentation.

Button Description
alignLeft Align text to the left
alignCenter Center-align text
alignRight Align text to the right
alignJustify Justify text (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 keyboard shortcuts also work for indent/outdent when the cursor is inside the editor.

➕ Insert Dropdown

The insertDropdown toolbar item renders a single Insert button (➕) that opens a dropdown containing:

Item Description
Link Insert or edit a hyperlink (opens a modal dialog)
Image Insert image via URL or file upload (opens a modal dialog)
Table Insert a table with custom rows, columns, and optional header
Emoji Open emoji picker (100+ emojis)
Symbol Open special characters picker (©, ®, €, π, Ω, arrows, etc.)

Tip

You can still use link, image, table, emoji, specialChars as standalone toolbar buttons if you prefer individual icons instead of the consolidated dropdown.

Link Dialog

When inserting a link, the modal provides:

  • URL field
  • Display text (pre-filled with selected text if any)
  • Open in new tab checkbox

Image Dialog

The image modal offers two ways to add images:

  • URL input — paste any image URL
  • File upload — converts to base64 and embeds in content

Important

Uploaded images are embedded as base64 data URIs directly in the HTML content. For large images, consider hosting them on a server and using the URL option instead.

Emoji & Special Characters

Both pickers open a grid popup positioned below the toolbar button. Click any character to insert it at the cursor position.

Other Insert Buttons

These buttons are available as standalone toolbar items:

Button Description
blockquote Toggle block quote on the current block
horizontalRule Insert a horizontal line (<hr>)

🛠️ Tools

Standalone utility buttons for the toolbar.

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

Find & Replace Features

Feature Description
Case Sensitive Toggle case-sensitive search
Regex Mode Enable regular expression patterns
Find Next Navigate through matches with visual highlighting
Replace Replace the current match
Replace All Replace all matches at once

⋯ More Menu

The moreMenu toolbar item renders a ⋯ button pushed to the right edge of the toolbar. It opens a dropdown containing:

Item Description
Save Trigger the onSave callback (also available via Ctrl+S)
Preview Open a preview modal showing the rendered content
Download Download the editor content as an HTML file
Print Open the browser print dialog for editor content
Autosave Toggle autosave to localStorage (shows status badge)
Clear all Clear all editor content (styled in red as a destructive action)
Toggle Theme Switch between Light ☀️ and Dark 🌙 theme
Fullscreen Toggle fullscreen editing mode

Theme Toggle

The theme toggle in the More menu switches between Light and Dark themes. The selected theme persists across page reloads via localStorage.

Tip

You can also toggle the theme programmatically: editor.toggleTheme(); or set a specific theme: editor.setTheme('dark');

Autosave

Caution

Autosave is designed for development and testing. For production, use the onSave or onChange callback to save content to your backend.

When enabled, autosave stores content to localStorage. Content is restored on page reload only if autosave was active. The status bar shows the autosave state.

📝 Floating Toolbar

In addition to the main toolbar, a floating toolbar appears when you select text in the editor. It provides quick access to:

  • Bold
  • Italic
  • Underline
  • Strikethrough
  • Insert Link

The floating toolbar follows the selection and disappears when the selection is cleared.

Note

The floating toolbar is always enabled and cannot be customized through config. It provides the most commonly used formatting options for quick access.

🏗️ Minimal Toolbar Example

For a clean, minimal editor:

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

🔥 Full-Featured Toolbar Example (Default)

The default toolbar configuration includes all available features:

new NeikiEditor('#editor', {
    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'
    ]
});

🔗 Related Pages

🖊️ Neiki's Editor

🏠 Home

Getting Started

Reference

Extending

Integration

Features & UI

Project

v3.1.0 · AGPLv3 · Live Demo

Clone this wiki locally