Recent changes to Plugin API

Plugin API modified by neikiri

neikiri — Tue, 09 Jun 2026 08:15:04 -0000

--- v4
+++ v5
@@ -251,13 +251,13 @@

 | | |
 |---|---|
-| [⚙️ Configuration](Configuration) | Editor configuration & toolbar array |
-| [🔧 Toolbar Reference](Toolbar-Reference) | Built-in toolbar button identifiers |
-| [📋 API Reference](API-Reference) | `insertHTML`, `setContent`, `getContent` and all other methods |
-| [🧩 Advanced Features](Advanced-Features) | Tables, images, themes, autosave |
+| [⚙️ Configuration](/p/neiki-editor/wiki/Configuration) | Editor configuration & toolbar array |
+| [🔧 Toolbar Reference](/p/neiki-editor/wiki/Toolbar%20Reference) | Built-in toolbar button identifiers |
+| [📋 API Reference](/p/neiki-editor/wiki/API%20Reference) | `insertHTML`, `setContent`, `getContent` and all other methods |
+| [🧩 Advanced Features](/p/neiki-editor/wiki/Advanced%20Features) | Tables, images, themes, autosave |

 ---

 

-  _{← Back to Home}
+  _{← Back to Home}

Plugin API modified by neikiri

neikiri — Tue, 09 Jun 2026 06:07:53 -0000

--- v3
+++ v4
@@ -1,19 +1,19 @@
 # 🔌 Plugin API

-Extend Neiki's Editor with custom functionality using the Plugin API. Plugins can add toolbar buttons, hook into initialization, and interact with the editor programmatically.
+> Extend Neiki's Editor with custom toolbar buttons, init hooks, and programmatic actions.

 ---

 ## 🧩 Overview

-Plugins are registered **globally** before or after editor initialization. Each plugin can optionally:
-
-- Add a **toolbar button** with a custom icon
+Plugins are registered **globally** via `NeikiEditor.registerPlugin()` before or after editor initialization. A plugin can:
+
+- Add a **toolbar button** with a custom SVG icon

 - Run an **action** when the button is clicked
-- Run an **init** function when the editor starts
+- Run an **init** function when the editor starts up

 > [!NOTE]
-> Plugins are registered globally via `NeikiEditor.registerPlugin()` and are available to **all** editor instances on the page.
+> Plugins are global — they are available to **all** editor instances on the page.

 ---

@@ -21,15 +21,22 @@

     :::javascript
     NeikiEditor.registerPlugin({

-        name: 'my-plugin',
-        icon: '',
-        tooltip: 'My Custom Action',
+        name: 'my-plugin',            // unique identifier (required)
+        icon: '',  // toolbar icon SVG
+        tooltip: 'My Custom Action',  // tooltip on hover
         action: function(editor) {
             // Called when toolbar button is clicked
         },
         init: function(editor) {
-            // Called once when editor initializes
-        }
+            // Called once when the editor initializes
+        }
+    });
+
+Then include it in the `toolbar` config:
+
+    :::javascript
+    new NeikiEditor('#editor', {
+        toolbar: ['bold', 'italic', '|', 'my-plugin', '|', 'moreMenu']
     });

 ---
@@ -37,15 +44,15 @@
 ## 📊 Plugin Properties

 | Property | Type | Required | Description |
-|----------|------|----------|-------------|
-| `name` | `string` | ✅ | Unique identifier for the plugin |
-| `icon` | `string` | ❌ | SVG icon markup for the toolbar button |
-| `tooltip` | `string` | ❌ | Tooltip text shown on hover |
-| `action` | `function(editor)` | ❌ | Handler called on toolbar button click |
-| `init` | `function(editor)` | ❌ | Handler called once during editor initialization |
+|---|---|---|---|
+| `name` | `string` | ✅ | Unique identifier. Referenced in the `toolbar` array. |
+| `icon` | `string` | ❌ | SVG markup for the toolbar button |
+| `tooltip` | `string` | ❌ | Hover tooltip text |
+| `action` | `function(editor)` | ❌ | Handler called when the toolbar button is clicked |
+| `init` | `function(editor)` | ❌ | Handler called once when the editor initializes |

 > [!IMPORTANT]
-> The `name` must be unique across all registered plugins. If you register two plugins with the same name, the second will overwrite the first.
+> Plugin names must be **unique**. Registering a second plugin with the same name overwrites the first.

 ---

@@ -53,7 +60,7 @@

 ### Word Counter Alert

-A simple plugin that shows a word count alert:
+Show a word and character count dialog:

     :::javascript
     NeikiEditor.registerPlugin({
@@ -61,7 +68,7 @@
         icon: '',
         tooltip: 'Show Word Count',
         action: function(editor) {

-            const text = editor.getContent().replace(/<[^>]*>/g, '');
+            const text = editor.getText();
             const words = text.trim().split(/\s+/).filter(Boolean).length;
             const chars = text.length;
             alert(`Words: ${words}\nCharacters: ${chars}`);
@@ -72,7 +79,7 @@

 ### Insert Timestamp

-Insert the current date and time at the cursor position:
+Insert current date/time at the cursor position:

     :::javascript
     NeikiEditor.registerPlugin({
@@ -88,9 +95,42 @@

 ---

-### Auto-Capitalize Headings
-
-A plugin that automatically capitalizes the first letter of every heading on init:
+### Insert Styled Divider
+

+    :::javascript
+    NeikiEditor.registerPlugin({
+        name: 'styled-divider',
+        icon: '',
+        tooltip: 'Insert Styled Divider',
+        action: function(editor) {
+            editor.insertHTML(
+                '• • •'
+            );
+        }
+    });
+
+---
+
+### Clear All Formatting
+
+Strip inline styles and attributes from content:
+
+    :::javascript
+    NeikiEditor.registerPlugin({
+        name: 'clean-paste',
+        icon: '',
+        tooltip: 'Clean All Formatting',
+        action: function(editor) {
+            const text = editor.contentArea.innerText;
+            editor.setContent('' + text.split('\n\n').join('
') + '');
+        }
+    });
+
+---
+
+### Auto-Capitalize Headings (init hook)
+
+Run code on every input event using the `init` hook:

     :::javascript
     NeikiEditor.registerPlugin({
@@ -102,7 +142,6 @@
                     if (h.textContent.length > 0) {
                         const first = h.textContent.charAt(0);
                         if (first !== first.toUpperCase()) {

-                            // Use selection-safe approach
                             h.textContent = first.toUpperCase() + h.textContent.slice(1);
                         }
                     }
@@ -112,46 +151,60 @@
     });

 > [!CAUTION]
-> Be careful with `init` plugins that modify content on every input event — they can interfere with the user's typing and cursor position. Always test thoroughly.
-
----
-
-### Insert Divider with Style
-

-    :::javascript
-    NeikiEditor.registerPlugin({
-        name: 'styled-divider',
-        icon: '',
-        tooltip: 'Insert Styled Divider',
-        action: function(editor) {
-            editor.insertHTML(
-                '• • •'
-            );
-        }
-    });
-
----
-
-### Clear Formatting & Normalize
-
-A cleanup plugin that strips all inline styles and extra attributes:
-
-    :::javascript
-    NeikiEditor.registerPlugin({
-        name: 'clean-paste',
-        icon: '',
-        tooltip: 'Clean All Formatting',
-        action: function(editor) {
-            const text = editor.contentArea.innerText;
-            editor.setContent('' + text.split('\n\n').join('
') + '');
-        }
-    });
-
----
-
-## 📋 Listing Plugins
-
-Retrieve all registered plugins:
+> Be careful with `init` plugins that modify the DOM on every input — they can interfere with cursor position. Always test thoroughly and handle edge cases.
+
+---
+
+### Character Limit
+
+Enforce a maximum character count:
+
+    :::javascript
+    NeikiEditor.registerPlugin({
+        name: 'char-limit',
+        init: function(editor) {
+            const MAX = 5000;
+            editor.contentArea.addEventListener('input', function() {
+                const text = editor.getText();
+                if (text.length > MAX) {
+                    // truncate to limit
+                    const truncated = text.slice(0, MAX);
+                    editor.setContent('' + truncated + '');
+                    alert(`Character limit of ${MAX} reached.`);
+                }
+            });
+        }
+    });
+
+---
+
+### Export as Markdown (action plugin)
+
+    :::javascript
+    NeikiEditor.registerPlugin({
+        name: 'export-markdown',
+        icon: '',
+        tooltip: 'Copy as Markdown',
+        action: function(editor) {
+            // Simple HTML-to-markdown conversion
+            let md = editor.getContent()
+                .replace(/(.*?)<\/h1>/gi, '# $1\n')
+                .replace(/
(.*?)<\/h2>/gi, '## $1\n')
+                .replace(/
(.*?)<\/h3>/gi, '### $1\n')
+                .replace(/(.*?)<\/strong>/gi, '**$1**')
+                .replace(/(.*?)<\/em>/gi, '*$1*')
+                .replace(/(.*?)<\/p>/gi, '$1\n\n')
+                .replace(/<[^>]+>/g, '');
+    
+            navigator.clipboard.writeText(md.trim()).then(() => {
+                alert('Copied as Markdown!');
+            });
+        }
+    });
+
+---
+
+## 📋 Listing Registered Plugins

     :::javascript
     const plugins = NeikiEditor.getPlugins();
@@ -170,32 +223,38 @@
         A --> C[Content Area]
         A --> D[Status Bar]
         B --> E[Plugin Buttons]

-        E --> F[Word Counter]
-        E --> G[Timestamp]
-        E --> H[Divider]
+        E --> F[word-counter]
+        E --> G[timestamp]
+        E --> H[custom-plugin]
         A --> I[Plugin Init Hooks]
-        I --> J["auto-capitalize #8594; addEventListener"]
+        I --> J[auto-capitalize → addEventListener]
+        I --> K[char-limit → addEventListener]

 ---

 ## 🔒 Best Practices

 > [!TIP]
-> Follow these guidelines for reliable plugins:
-
-1. **Use unique names** — prefix with your project name if needed (e.g., `myapp-timestamp`)
-2. **Keep actions focused** — one plugin, one responsibility
-3. **Don't modify `contentArea` directly in `init`** — use editor API methods when possible
-4. **Test with built-in themes** — ensure your plugin UI works in Light, Dark, Blue, and Dark Blue modes
-5. **Handle edge cases** — check for empty selection before operating on it
+> Follow these guidelines for reliable, maintainable plugins:
+
+1. **Use unique names** — prefix with your project name to avoid collisions (e.g., `myapp-word-counter`)
+2. **One plugin, one responsibility** — keep actions focused and simple
+3. **Prefer editor API methods** — use `editor.insertHTML()`, `editor.setContent()`, etc. over manipulating `contentArea` directly
+4. **Test with all 4 themes** — ensure your plugin's UI looks correct in Light, Dark, Blue, and Dark Blue
+5. **Handle empty selections** — check `editor.isEmpty()` or selection state before operating
+6. **Clean up in destroy** — if your `init` adds event listeners outside the editor, remove them when needed
+7. **Don't block the main thread** — for heavy operations in `action`, use `setTimeout` or async patterns

 ---

 ## 🔗 Related Pages

-- **[⚙️ Configuration](Configuration)** — Editor configuration options
-- **[🔧 Toolbar Reference](Toolbar-Reference)** — Built-in toolbar buttons
-- **[🧩 Advanced Features](Advanced-Features)** — Tables, images, themes
+| | |
+|---|---|
+| [⚙️ Configuration](Configuration) | Editor configuration & toolbar array |
+| [🔧 Toolbar Reference](Toolbar-Reference) | Built-in toolbar button identifiers |
+| [📋 API Reference](API-Reference) | `insertHTML`, `setContent`, `getContent` and all other methods |
+| [🧩 Advanced Features](Advanced-Features) | Tables, images, themes, autosave |

 ---

Plugin API modified by neikiri

neikiri — Tue, 09 Jun 2026 06:07:52 -0000

--- v2
+++ v3
@@ -186,7 +186,7 @@

 1. **Use unique names** — prefix with your project name if needed (e.g., `myapp-timestamp`)
 2. **Keep actions focused** — one plugin, one responsibility
 3. **Don't modify `contentArea` directly in `init`** — use editor API methods when possible
-4. **Test with both themes** — ensure your plugin UI works in Light and Dark mode
+4. **Test with built-in themes** — ensure your plugin UI works in Light, Dark, Blue, and Dark Blue modes
 5. **Handle edge cases** — check for empty selection before operating on it

 ---

Plugin API modified by neikiri

neikiri — Tue, 09 Jun 2026 06:07:50 -0000

--- v1
+++ v2
@@ -1,6 +1,6 @@
 # 🔌 Plugin API

-Extend Neiki Editor with custom functionality using the Plugin API. Plugins can add toolbar buttons, hook into initialization, and interact with the editor programmatically.
+Extend Neiki's Editor with custom functionality using the Plugin API. Plugins can add toolbar buttons, hook into initialization, and interact with the editor programmatically.

 ---

Plugin API modified by neikiri

neikiri — Tue, 09 Jun 2026 06:07:46 -0000

🔌 Plugin API

Extend Neiki Editor with custom functionality using the Plugin API. Plugins can add toolbar buttons, hook into initialization, and interact with the editor programmatically.

🧩 Overview

Plugins are registered globally before or after editor initialization. Each plugin can optionally:

Add a toolbar button with a custom icon
Run an action when the button is clicked
Run an init function when the editor starts

[!NOTE]
Plugins are registered globally via NeikiEditor.registerPlugin() and are available to all editor instances on the page.

📝 Registering a Plugin

NeikiEditor.registerPlugin({
    name: 'my-plugin',
    icon: '<svg viewBox="0 0 24 24">...</svg>',
    tooltip: 'My Custom Action',
    action: function(editor) {
        // Called when toolbar button is clicked
    },
    init: function(editor) {
        // Called once when editor initializes
    }
});

📊 Plugin Properties

Property	Type	Required	Description
`name`	`string`	✅	Unique identifier for the plugin
`icon`	`string`	❌	SVG icon markup for the toolbar button
`tooltip`	`string`	❌	Tooltip text shown on hover
`action`	`function(editor)`	❌	Handler called on toolbar button click
`init`	`function(editor)`	❌	Handler called once during editor initialization

[!IMPORTANT]
The name must be unique across all registered plugins. If you register two plugins with the same name, the second will overwrite the first.

💡 Plugin Examples

Word Counter Alert

A simple plugin that shows a word count alert:

NeikiEditor.registerPlugin({
    name: 'word-counter',
    icon: '<svg viewBox="0 0 24 24"><path d="M3 18h12v-2H3v2zM3 6v2h18V6H3zm0 7h18v-2H3v2z"/></svg>',
    tooltip: 'Show Word Count',
    action: function(editor) {
        const text = editor.getContent().replace(/<[^>]*>/g, '');
        const words = text.trim().split(/\s+/).filter(Boolean).length;
        const chars = text.length;
        alert(`Words: ${words}\nCharacters: ${chars}`);
    }
});

Insert Timestamp

Insert the current date and time at the cursor position:

NeikiEditor.registerPlugin({
    name: 'timestamp',
    icon: '<svg viewBox="0 0 24 24"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67V7z"/></svg>',
    tooltip: 'Insert Timestamp',
    action: function(editor) {
        const now = new Date();
        const formatted = now.toLocaleString();
        editor.insertHTML(`<span style="color:#6b7280;font-size:0.9em">[${formatted}]</span>&nbsp;`);
    }
});

Auto-Capitalize Headings

A plugin that automatically capitalizes the first letter of every heading on init:

NeikiEditor.registerPlugin({
    name: 'auto-capitalize',
    init: function(editor) {
        editor.contentArea.addEventListener('input', function() {
            const headings = editor.contentArea.querySelectorAll('h1, h2, h3, h4, h5, h6');
            headings.forEach(function(h) {
                if (h.textContent.length > 0) {
                    const first = h.textContent.charAt(0);
                    if (first !== first.toUpperCase()) {
                        // Use selection-safe approach
                        h.textContent = first.toUpperCase() + h.textContent.slice(1);
                    }
                }
            });
        });
    }
});

[!CAUTION]
Be careful with init plugins that modify content on every input event — they can interfere with the user's typing and cursor position. Always test thoroughly.

Insert Divider with Style

NeikiEditor.registerPlugin({
    name: 'styled-divider',
    icon: '<svg viewBox="0 0 24 24"><path d="M2 12h4v1H2v-1zm6 0h4v1H8v-1zm6 0h4v1h-4v-1zm6 0h2v1h-2v-1z"/></svg>',
    tooltip: 'Insert Styled Divider',
    action: function(editor) {
        editor.insertHTML(
            '<div style="text-align:center;margin:1.5em 0;color:#d1d5db;letter-spacing:0.5em;font-size:1.2em">• • •</div>'
        );
    }
});

Clear Formatting & Normalize

A cleanup plugin that strips all inline styles and extra attributes:

NeikiEditor.registerPlugin({
    name: 'clean-paste',
    icon: '<svg viewBox="0 0 24 24"><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>',
    tooltip: 'Clean All Formatting',
    action: function(editor) {
        const text = editor.contentArea.innerText;
        editor.setContent('<p>' + text.split('\n\n').join('</p><p>') + '</p>');
    }
});

📋 Listing Plugins

Retrieve all registered plugins:

const plugins = NeikiEditor.getPlugins();

plugins.forEach(function(plugin) {
    console.log('Plugin:', plugin.name);
});

🏗️ Plugin Architecture

graph TD
    A[NeikiEditor Instance] --> B[Toolbar Area]
    A --> C[Content Area]
    A --> D[Status Bar]
    B --> E[Plugin Buttons]
    E --> F[Word Counter]
    E --> G[Timestamp]
    E --> H[Divider]
    A --> I[Plugin Init Hooks]
    I --> J["auto-capitalize #8594; addEventListener"]

🔒 Best Practices

[!TIP]
Follow these guidelines for reliable plugins:

Use unique names — prefix with your project name if needed (e.g., myapp-timestamp)
Keep actions focused — one plugin, one responsibility
Don't modify contentArea directly in init — use editor API methods when possible
Test with both themes — ensure your plugin UI works in Light and Dark mode
Handle edge cases — check for empty selection before operating on it

⚙️ Configuration — Editor configuration options
🔧 Toolbar Reference — Built-in toolbar buttons
🧩 Advanced Features — Tables, images, themes

_{← Back to Home}

Recent changes to Plugin API

Plugin API modified by neikiri

Plugin API modified by neikiri

(.*?)<\/h1>/gi, '# $1\n') + .replace(/

(.*?)<\/h2>/gi, '## $1\n') + .replace(/

Plugin API modified by neikiri

Plugin API modified by neikiri

Plugin API modified by neikiri

🔌 Plugin API

🧩 Overview

📝 Registering a Plugin

📊 Plugin Properties

💡 Plugin Examples

Word Counter Alert

Insert Timestamp

Auto-Capitalize Headings

Insert Divider with Style

Clear Formatting & Normalize

📋 Listing Plugins

🏗️ Plugin Architecture

🔒 Best Practices

🔗 Related Pages