Menu ▾ ▴

API Reference

neikiri

📋 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)

Register a plugin globally. Available to all editor instances.

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

Related

Wiki: Configuration