Advanced Features

🧩 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 toolbar button:

Add 'themeToggle' to your toolbar config (included by default). The button shows a ☀️ sun icon in light mode and a 🌙 moon icon in dark mode.

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

---

🔍 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 an opt-in feature not included in the default toolbar.

Enabling Autosave

Add 'autosave' to your toolbar:

new NeikiEditor('#editor', {
    toolbar: [
        'bold', 'italic', 'underline', '|',
        'autosave'
    ]
});

How It Works

1. User clicks the Autosave toggle button in the toolbar
2. Button becomes "active" (highlighted)
3. Content is saved to localStorage every 5 seconds
4. On next page load, if autosave is still 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	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.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.destroy();                       // Remove editor, restore textarea
editor.toggleFullscreen();              // Toggle fullscreen
editor.toggleTheme();                   // Toggle light/dark

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

• ⚙️ Configuration — All config options
• 🔧 Toolbar Reference — All toolbar buttons
• 🔌 Plugin API — Extend with plugins
• 🔗 Integration Guide — PHP, Vue, React, AJAX

---

_{← Back to Home}