Skip to content

Advanced Features

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

🧩 Advanced Features

Deep dive into Neiki Editor's advanced capabilities — tables, images, themes, find & replace, autosave, and more.

📊 Tables

Insert tables via the Table toolbar button. A dialog lets you set:

  • Rows — number of rows
  • Columns — number of columns
  • Header row — optional first row styled as <th>

Table Context Menu

Right-click on any table cell to access a context menu with these options:

Action Description
Insert Row Above Add a row above the current cell
Insert Row Below Add a row below the current cell
Insert Column Left Add a column to the left
Insert Column Right Add a column to the right
Delete Row Remove the current row
Delete Column Remove the current column
Delete Table Remove the entire table
Merge Cells Merge selected cells horizontally (uses colspan)
Split Cell Split a previously merged cell back to individual cells

Tip

To select multiple cells for merging, click the first cell, then hold Shift and click the last cell in the same row. Then right-click to access "Merge Cells".

Table Styling

Tables are rendered with default styling provided by neiki-editor.css:

  • Bordered cells with subtle grid lines
  • Header row with distinct background color
  • Responsive width (100% of editor)
  • Both Light and Dark theme compatible

🖼️ Images

Neiki Editor supports three ways to insert images:

1. URL Input

Click the Image toolbar button, paste a URL, and the image is inserted as a standard <img> tag.

<img src="https://example.com/photo.jpg" alt="Description">

2. File Upload

The image dialog includes a file picker. Selected images are:

  1. Read via FileReader API
  2. Converted to base64 data URI
  3. Embedded directly in the HTML content
<img src="data:image/png;base64,iVBORw0KGgo..." alt="">

Caution

Base64-encoded images increase the HTML content size significantly. For production use with large images, consider:

  • Uploading images to your server/CDN via the onChange callback
  • Replacing base64 images with server URLs before saving
  • Setting file size limits in your backend

3. Drag & Drop

Drag an image file directly into the editor content area. The editor automatically:

  1. Detects the drop event
  2. Reads the file as base64
  3. Inserts it at the exact drop position

Note

Drag & drop works with single image files. Multiple files dropped at once will each be inserted sequentially.

🎨 Themes

Light Theme (Default)

Clean white background with dark text. Standard for most use cases.

Dark Theme

Dark background with light text. Easy on the eyes for extended editing sessions.

Setting the Theme

On initialization:

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

Toggle at runtime:

editor.toggleTheme();

Via the More menu (⋯):

The default toolbar includes 'moreMenu' which contains a Toggle Theme item. The icon shows a ☀️ sun in light mode and a 🌙 moon in dark mode.

Set a specific theme:

editor.setTheme('dark');
editor.setTheme('light');

Theme Persistence

Important

The selected theme is persisted to localStorage as a global setting. This means:

  • The theme choice applies to all editor instances on the page
  • The theme persists across page reloads
  • If a user selects dark mode, it remains dark even if you set theme: 'light' in config — user preference takes priority

Styling with Themes

The dark theme applies the CSS class neiki-dark to the editor container. You can use this to style custom elements:

/* Custom styling for dark mode */
.neiki-dark .my-custom-element {
    background: #1e1e1e;
    color: #e0e0e0;
}

🌍 Localization (i18n)

Neiki Editor supports multiple UI languages for all user-facing text.

Supported Languages

Code Language
en English (default)
cs Czech
zh Chinese
es Spanish
de German
fr French
pt Portuguese
ja Japanese

Setting the Language

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

What Gets Translated

  • All toolbar button tooltips
  • Modal dialog labels (Link, Image, Table, Find & Replace)
  • Status bar texts (word count, character count)
  • Autosave messages ("Autosaving...", "Saved locally")
  • System messages and confirmations

Note

The language option must be set at initialization. Changing language at runtime requires re-initializing the editor.

🔍 Find & Replace

Open Find & Replace via the findReplace toolbar button. The bar appears at the top of the editor content area.

Features

Feature Description
Search field Type text to find in the editor content
Replace field Type replacement text
Case Sensitive Toggle button — when active, Hello ≠ hello
Regex Mode Toggle button — enables regular expression patterns
Find Next Jump to and highlight the next match
Replace Replace the current highlighted match
Replace All Replace every occurrence at once

Regex Examples

When Regex Mode is enabled, you can use powerful patterns:

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

Tip

Regex mode uses JavaScript's RegExp under the hood. All standard regex syntax is supported, including character classes, quantifiers, and groups.

💾 Autosave

Autosave is accessible from the More menu (⋯) in the default toolbar.

How It Works

  1. User clicks Autosave in the More menu (⋯)
  2. A badge shows the autosave status (✓ when active, ✕ when inactive)
  3. Content is saved to localStorage on content changes
  4. The status bar shows "Autosaving..." / "Saved locally"
  5. On next page load, if autosave was enabled, content is restored automatically

When Autosave is Disabled

  • No automatic saves occur
  • On page reload, the original content from the <textarea> is shown (not old localStorage data)
  • This is the default behavior

Caution

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

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

✏️ Floating Toolbar

A context-sensitive toolbar that appears when text is selected.

Included Actions

  • Bold
  • Italic
  • Underline
  • Strikethrough
  • Insert Link

Behavior

  • Appears automatically above the text selection
  • Follows the selection position
  • Disappears when selection is cleared or the user clicks away
  • Works alongside the main toolbar (both can be used)

Note

The floating toolbar is always enabled and cannot be disabled or customized through configuration.

🖨️ Print

Click the Print toolbar button to print the editor content.

The print function:

  1. Opens a new browser window
  2. Copies the editor's HTML content with basic print styling
  3. Triggers the browser's native print dialog
  4. Closes the print window after printing

The printed output includes only the content — no toolbar, status bar, or editor chrome.

📐 Status Bar

The status bar sits at the bottom of the editor and displays real-time information:

Position Content
Left Word count and character count
Right Autosave status (when enabled) and current block type (p, h1, h2, h3, etc.)

The status bar updates automatically as you type or move the cursor.

📋 API Methods Reference

Content Methods

editor.getContent();                    // Get HTML string
editor.setContent('<p>Hello</p>');      // Set HTML content
editor.getText();                       // Get plain text content
editor.isEmpty();                       // Check if editor is empty

editor.getHTML();                       // Alias for getContent()
editor.setHTML(html);                   // Alias for setContent()

editor.getJSON();                       // Get structured JSON
editor.setJSON(json);                   // Set from JSON

Editor Control

editor.focus();                         // Focus the editor
editor.blur();                          // Blur the editor
editor.enable();                        // Enable editing
editor.disable();                       // Disable editing (read-only)
editor.destroy();                       // Remove editor, restore textarea
editor.toggleFullscreen();              // Toggle fullscreen
editor.toggleTheme();                   // Toggle light/dark
editor.setTheme('dark');                // Set specific theme
editor.triggerSave();                   // Trigger onSave callback
editor.previewContent();                // Open preview modal
editor.downloadContent();               // Download content as HTML file
editor.clearAll();                      // Clear all content

Command Execution

editor.execCommand('bold');             // Execute any command
editor.insertHTML('<mark>hi</mark>');   // Insert HTML at cursor
editor.wrapSelection('mark', { class: 'hl' });  // Wrap selection
editor.unwrapSelection('mark');         // Unwrap selection

Selection

editor.getSelection();                  // Get Selection object

🔗 Related Pages

🖊️ Neiki's Editor

🏠 Home

Getting Started

Reference

Extending

Integration

Features & UI

Project

v3.1.0 · AGPLv3 · Live Demo

Clone this wiki locally