API Reference modified by neikiri

neikiri — Tue, 09 Jun 2026 07:59:30 -0000

--- v1
+++ v2
@@ -395,12 +395,12 @@

 | | |
 |---|---|
-| [⚙️ Configuration](Configuration) | All init options and callbacks |
-| [🔌 Plugin API](Plugin-API) | Extend the editor with custom plugins |
-| [🧩 Advanced Features](Advanced-Features) | Deep dives into specific features |
+| [⚙️ Configuration](/p/neiki-editor/wiki/Configuration) | All init options and callbacks |
+| [🔌 Plugin API](/p/neiki-editor/wiki/Plugin%20API) | Extend the editor with custom plugins |
+| [🧩 Advanced Features](/p/neiki-editor/wiki/Advanced%20Features) | Deep dives into specific features |

 ---

 

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

API Reference modified by neikiri

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

📋 API Reference

Complete reference for all public methods, properties, and callbacks on a NeikiEditor instance.

🏗️ Constructor

const editor = new NeikiEditor(target, options);

Parameter	Type	Description
`target`	`string \\| HTMLElement`	CSS selector string or DOM element (`textarea`, `div`, etc.)
`options`	`object`	Optional configuration object — see Configuration

Returns: a NeikiEditor instance.

📄 Content Methods

`getContent()` / `getHTML()`

Returns the current editor content as an HTML string.

const html = editor.getContent();
// '<p>Hello <strong>world</strong></p>'

[!NOTE]
Both getContent() and getHTML() are aliases — they return identical results.

`setContent(html)` / `setHTML(html)`

Replace the editor's content with the provided HTML string.

editor.setContent('<p>New content here</p>');

`getText()`

Returns the current content as plain text with all HTML tags stripped.

const text = editor.getText();
// 'Hello world'

`isEmpty()`

Returns true if the editor has no meaningful content.

if (editor.isEmpty()) {
    alert('Please write something first!');
}

`getJSON()`

Returns the editor content as a structured JSON object.

const json = editor.getJSON();

`setJSON(json)`

Set the editor content from a JSON object (previously obtained from getJSON()).

editor.setJSON(savedJson);

`insertHTML(html)`

Insert arbitrary HTML at the current cursor position.

editor.insertHTML('<mark>highlighted text</mark>&nbsp;');
editor.insertHTML('<hr>');

`clearAll()`

Remove all content from the editor.

editor.clearAll();

🖊️ Selection Methods

`getSelection()`

Returns the browser Selection object for the editor's content area.

const selection = editor.getSelection();

`wrapSelection(tag, attributes)`

Wrap the current selection in an HTML element.

editor.wrapSelection('mark', { class: 'highlight' });
// <mark class="highlight">selected text</mark>

`unwrapSelection(tag)`

Remove wrapping of the given tag from the current selection.

editor.unwrapSelection('mark');

⚙️ Editor Control

`focus()`

Programmatically focus the editor.

editor.focus();

`blur()`

Remove focus from the editor.

editor.blur();

`enable()`

Re-enable an editor that was previously disabled.

editor.enable();

`disable()`

Make the editor read-only. Content is visible but cannot be edited.

editor.disable();

`destroy()`

Remove the editor and restore the original <textarea> element. Cleans up all event listeners.

editor.destroy();

[!IMPORTANT]
Always call destroy() when removing an editor from the DOM — especially in SPA frameworks (Vue, React). Failing to do so causes memory leaks.

`toggleFullscreen()`

Toggle fullscreen editing mode on/off.

editor.toggleFullscreen();

`triggerSave()`

Programmatically trigger the onSave callback (same as Ctrl+S).

editor.triggerSave();

`previewContent()`

Open the preview modal showing the rendered content.

editor.previewContent();

`downloadContent()`

Download the current content as an .html file.

editor.downloadContent();

🎨 Theme Methods

`toggleTheme()`

Cycle to the next built-in theme (Light → Dark → Blue → Dark Blue → Light → ...).

editor.toggleTheme();

`setTheme(theme)`

Set a specific theme by name.

editor.setTheme('dark');       // 'light' | 'dark' | 'blue' | 'dark-blue'
editor.setTheme('light');
editor.setTheme('blue');
editor.setTheme('dark-blue');

[!NOTE]
The selected theme is persisted to localStorage and applies globally to all editor instances on the page.

⚡ Command Execution

`execCommand(command, value)`

Execute any document.execCommand command on the editor content.

editor.execCommand('bold');
editor.execCommand('foreColor', '#ff0000');
editor.execCommand('fontSize', '5');

🔌 Static Plugin Methods

These are called on the NeikiEditor class, not on an instance.

`NeikiEditor.registerPlugin(plugin)`

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

See Plugin API for full details.

`NeikiEditor.getPlugins()`

Returns an array of all currently registered plugins.

const plugins = NeikiEditor.getPlugins();
plugins.forEach(p => console.log(p.name));

📡 Callbacks Reference

Callbacks are passed in the options object at initialization:

Callback	Signature	Fired when
`onReady`	`(editor) => void`	Editor is fully initialized
`onChange`	`(htmlContent) => void`	Any content change occurs
`onSave`	`(htmlContent) => void`	`Ctrl+S` or More → Save
`onFocus`	`() => void`	Editor gains focus
`onBlur`	`() => void`	Editor loses focus

Example — All callbacks

const editor = new NeikiEditor('#editor', {
    onReady: (editor) => {
        console.log('Editor ready:', editor);
    },

    onChange: (content) => {
        // Auto-save to backend with debounce
        debounce(() => {
            fetch('/api/draft', {
                method: 'POST',
                body: JSON.stringify({ content })
            });
        }, 2000)();
    },

    onSave: (content) => {
        fetch('/api/save', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ content })
        })
        .then(() => console.log('Saved!'));
    },

    onFocus: () => {
        document.title = '✏️ Editing...';
    },

    onBlur: () => {
        document.title = 'My App';
    }
});

🧩 Instance Properties

Property	Description
`editor.contentArea`	The `contenteditable` DOM element
`editor.toolbar`	The toolbar DOM element

These are useful in init plugins that need to add event listeners directly.

🗂️ Quick Reference Cheatsheet

// --- Content ---
editor.getContent()            // → HTML string
editor.setContent('<p>Hi</p>') // set content
editor.getText()               // → plain text
editor.isEmpty()               // → boolean
editor.getJSON()               // → JSON object
editor.setJSON(json)           // set from JSON
editor.getHTML()               // alias for getContent()
editor.setHTML(html)           // alias for setContent()
editor.insertHTML('<b>x</b>')  // insert at cursor
editor.clearAll()              // clear all content

// --- Selection ---
editor.getSelection()          // → Selection object
editor.wrapSelection('mark', { class: 'hl' })
editor.unwrapSelection('mark')

// --- Control ---
editor.focus()
editor.blur()
editor.enable()
editor.disable()
editor.destroy()               // remove editor, restore textarea
editor.toggleFullscreen()
editor.triggerSave()           // trigger onSave
editor.previewContent()        // open preview modal
editor.downloadContent()       // download as HTML file

// --- Theme ---
editor.toggleTheme()           // cycle themes
editor.setTheme('dark')        // set specific theme

// --- Command ---
editor.execCommand('bold')

// --- Static ---
NeikiEditor.registerPlugin({ name, icon, tooltip, action, init })
NeikiEditor.getPlugins()       // → array of plugins


⚙️ Configuration	All init options and callbacks
🔌 Plugin API	Extend the editor with custom plugins
🧩 Advanced Features	Deep dives into specific features

_{← Back to Home}

Recent changes to API Reference

API Reference modified by neikiri

API Reference modified by neikiri

📋 API Reference

🏗️ Constructor

📄 Content Methods

getContent() / getHTML()

setContent(html) / setHTML(html)

getText()

isEmpty()

getJSON()

setJSON(json)

insertHTML(html)

clearAll()

🖊️ Selection Methods

getSelection()

wrapSelection(tag, attributes)

unwrapSelection(tag)

⚙️ Editor Control

focus()

blur()

enable()

disable()

destroy()

toggleFullscreen()

triggerSave()

previewContent()

downloadContent()

🎨 Theme Methods

toggleTheme()

setTheme(theme)

⚡ Command Execution

execCommand(command, value)

🔌 Static Plugin Methods

NeikiEditor.registerPlugin(plugin)

NeikiEditor.getPlugins()

📡 Callbacks Reference

Example — All callbacks

🧩 Instance Properties

🗂️ Quick Reference Cheatsheet

🔗 Related Pages

`getContent()` / `getHTML()`

`setContent(html)` / `setHTML(html)`

`getText()`

`isEmpty()`

`getJSON()`

`setJSON(json)`

`insertHTML(html)`

`clearAll()`

`getSelection()`

`wrapSelection(tag, attributes)`

`unwrapSelection(tag)`

`focus()`

`blur()`

`enable()`

`disable()`

`destroy()`

`toggleFullscreen()`

`triggerSave()`

`previewContent()`

`downloadContent()`

`toggleTheme()`

`setTheme(theme)`

`execCommand(command, value)`

`NeikiEditor.registerPlugin(plugin)`

`NeikiEditor.getPlugins()`