Live version: https://neikiri.dev/editor · Documentation: Wiki

Overview

Neiki's Editor is a WYSIWYG rich text editor written in plain JavaScript with zero dependencies. You attach it to an existing <textarea> (or any element), and it becomes a full editing surface — toolbar, formatting tools, tables, images, video, and a status bar — without pulling in a framework or a build step.

<textarea id="editor"></textarea>
<script src="https://cdn.neikiri.dev/neiki-editor/neiki-editor.min.js"></script>
<script>
  const editor = new NeikiEditor('#editor');
</script>

That snippet is a complete, working editor. The minified build bundles its own CSS, so a single <script> tag is enough to get started. From there you can configure the toolbar, switch themes, wire up callbacks, and extend behaviour through the plugin API.

Why Neiki's Editor?

Most rich text editors ask you to make a trade-off: either pull in a dependency tree and a bundler, or commit to a specific framework. Neiki's Editor avoids that trade-off.

• One file, no dependencies. The editor ships as a single script. The minified build embeds its CSS, so there is nothing else to install, import, or bundle. Drop it into a static page, a PHP template, or a SPA component — it behaves the same way.
• Zero-config by default, configurable when you need it. new NeikiEditor('#editor') gives you the full toolbar immediately. Every option is optional, so you only reach for configuration when you actually want to change something.
• Real editing features, not just bold and italic. Tables with a context menu and column resizing, image resize handles, drag-and-drop block reordering, a floating selection toolbar, find & replace with regex, an HTML source view, autosave, fullscreen, and print are all built in.
• Built-in sanitization. All HTML entering the editor is sanitized client-side, and the bundled PHP helper exposes a server-side sanitize() method. Security is treated as part of the editor, not an afterthought (see Security).
• Framework-friendly without being framework-bound. It works with plain HTML, and the docs include patterns for React, Vue 2/3, Laravel Blade, and AJAX workflows. A destroy() method makes clean teardown in SPA components straightforward.
• Localized out of the box. Eight UI languages are bundled, and you can override or add translations with your own keys.

If you want a content editor that you can read, host, and reason about as a single file — while still getting the features a production CMS needs — that is the gap this project fills.

Features

Text formatting

• Bold, italic, underline, strikethrough, subscript, superscript
• Inline <code> and <pre><code> code blocks
• Remove formatting
• Headings (Paragraph, H1–H6), font family, and a font-size widget with − / + controls and presets
• Text color and background color pickers (preset palette, native color input, hex input)

When no text is selected, formatting commands automatically apply to the word at the cursor.

Structure and content blocks

• Bulleted and numbered lists, indent / outdent
• Left, center, right, and justify alignment
• Blockquotes and horizontal rules
• Tables — configurable rows/columns and optional header row, a right-click context menu (insert/delete rows and columns, delete table, merge and split cells), and drag-to-resize columns
• Images — insert by URL, file upload, drag & drop, or clipboard paste; resize via corner handles with a live size label; replace or delete from a contextual image toolbar
• Video — insert by URL, file upload, or drag & drop; rendered as <video controls> and resizable like images

Editing experience

• Floating toolbar that appears on text selection (move block up/down, bold, italic, underline, strikethrough, insert link)
• Block drag & drop reordering using a grip handle, with ghost preview and drop placeholder
• Find & Replace with case-sensitive and regular-expression modes
• HTML source view with syntax highlighting
• Undo / redo, autosave to localStorage, fullscreen mode, content preview, download as HTML, and print
• Status bar showing word count, character count, and the current block type

Developer features

• Zero dependencies, single-file drop-in
• Plugin API for custom toolbar buttons and init hooks
• PHP integration helper with asset loading, rendering, and HTML sanitization
• Eight built-in UI languages: en, cs, zh, es, de, fr, pt, ja
• Four built-in themes: Light, Dark, Blue, Dark Blue, Midnight
• Lifecycle callbacks: onReady, onChange, onSave, onFocus, onBlur

Getting started

The recommended install is the single bundled script from the CDN. CSS is included automatically.

<script src="https://cdn.neikiri.dev/neiki-editor/neiki-editor.min.js"></script>

Pin a specific version

<script src="https://cdn.neikiri.dev/neiki-editor/3.1.0/neiki-editor.min.js"></script>

Load CSS and JS separately

<!-- Latest -->
<link rel="stylesheet" href="https://cdn.neikiri.dev/neiki-editor/neiki-editor.css">
<script src="https://cdn.neikiri.dev/neiki-editor/neiki-editor.js"></script>

<!-- Or pinned -->
<link rel="stylesheet" href="https://cdn.neikiri.dev/neiki-editor/3.1.0/neiki-editor.css">
<script src="https://cdn.neikiri.dev/neiki-editor/3.1.0/neiki-editor.js"></script>

Alternative CDN — jsDelivr

<script src="https://cdn.jsdelivr.net/gh/neikiri/neiki-editor@latest/dist/neiki-editor.min.js"></script>
<!-- Pinned -->
<script src="https://cdn.jsdelivr.net/gh/neikiri/[email protected]/dist/neiki-editor.min.js"></script>

Package manager

npm install neiki-editor
# or
yarn add neiki-editor
# or
pnpm add neiki-editor

Self-hosted

<script src="path/to/neiki-editor.min.js"></script>

<!-- Or separate files -->
<link rel="stylesheet" href="path/to/neiki-editor.css">
<script src="path/to/neiki-editor.js"></script>

Note: When using separate CSS and JS files, load the CSS before the JS so the editor renders correctly during initialization.

Basic usage

Attach the editor to a <textarea>. Any HTML already inside the element is loaded automatically.

<textarea id="editor"><p>Hello, world!</p></textarea>

<script>
  const editor = new NeikiEditor('#editor');
</script>

The editor can also be attached to a <div> with existing content, or to a DOM element reference, and multiple editors can coexist on the same page:

const editor1 = new NeikiEditor('#editor-1', { theme: 'light' });
const editor2 = new NeikiEditor('#editor-2', { theme: 'dark', minHeight: 200 });

Getting content back

const html = editor.getContent();   // HTML string
const text = editor.getText();      // plain text, tags stripped
const empty = editor.isEmpty();     // boolean
const json = editor.getJSON();      // structured JSON

Saving on form submit

const editor = new NeikiEditor('#editor');

document.getElementById('my-form').addEventListener('submit', function (e) {
  e.preventDefault();
  const content = editor.getContent();
  // send `content` to your backend...
});

Configuration

All options are optional. Pass them as the second argument to the constructor.

const editor = new NeikiEditor('#editor', {
  placeholder: 'Start typing...',
  minHeight: 300,
  maxHeight: 600,
  theme: 'light',     // 'light' | 'dark' | 'blue' | 'dark-blue'
  language: 'en',     // 'en' | 'cs' | 'zh' | 'es' | 'de' | 'fr' | 'pt' | 'ja'
  onChange: function (content, editor) {
    console.log('Content changed:', content);
  }
});

Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | placeholder | string | 'Start typing...' | Ghost text shown when the editor is empty | | minHeight | number | 300 | Minimum height in pixels | | maxHeight | number \| null | null | Maximum height in pixels (enables scroll). When null, the toolbar uses position: sticky while scrolling | | autofocus | boolean | false | Focus the editor on initialization | | spellcheck | boolean | true | Enable browser spellcheck | | readonly | boolean | false | Make the editor read-only | | theme | string | 'light' | 'light', 'dark', 'blue', 'dark-blue', or 'midnight' | | language | string | 'en' | UI language (see list above) | | translations | object \| null | null | Custom translation keys, merged with built-ins | | autosaveKey | string \| null | null | Custom localStorage scope for autosave | | customClass | string \| null | null | Extra CSS class appended to the content area (neiki-content) | | toolbar | array | (full set) | Toolbar button configuration | | showHelp | boolean | true | Show the Help item in the More menu (⋯) | | imageUploadHandler | function \| null | null | Async (file) => Promise<url> for server/CDN image uploads instead of base64 | | videoUploadHandler | function \| null | null | Async (file) => Promise<url> for server/CDN video uploads instead of base64 | | onChange | function \| null | null | Fired on every content change | | onSave | function \| null | null | Fired on save (Ctrl+S or More → Save) | | onFocus | function \| null | null | Fired when the editor gains focus | | onBlur | function \| null | null | Fired when the editor loses focus | | onReady | function \| null | null | Fired once the editor is fully initialized |

The language option is read at initialization. Changing the UI language at runtime requires re-initializing the editor.

Customizing the toolbar

The toolbar option takes an array of button identifiers. Use '|' to add a visual separator; groups between separators wrap together as units on narrow screens.

new NeikiEditor('#editor', {
  toolbar: [
    'bold', 'italic', 'underline', '|',
    'heading', 'fontSize', '|',
    'bulletList', 'numberedList', '|',
    'insertDropdown', '|',
    'moreMenu'
  ]
});

Available identifiers include text formatting (bold, italic, underline, strikethrough, subscript, superscript, code, removeFormat), style (heading, fontFamily, fontSize, foreColor, backColor), alignment and lists (alignLeft, alignCenter, alignRight, alignJustify, bulletList, numberedList, indent, outdent), structure (blockquote, horizontalRule), tools (undo, redo, findReplace, viewCode), the grouped insertDropdown, the right-aligned moreMenu, and a standalone themeToggle. See the Toolbar Reference for the full list.

Themes

Five themes ship by default: light, dark, blue, dark-blue, and midnight. Set one at init or change it at runtime:

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

editor.setTheme('midnight'); // set a specific theme
editor.toggleTheme();        // cycle: light → dark → blue → dark-blue → midnight → light

The selected theme is persisted to localStorage as a global setting. It applies to all editor instances on the page and persists across reloads. If a user has already chosen a theme, that saved preference takes priority over the theme config value — call setTheme() after init if you need to override it.

Custom content styling

Use customClass to add your own class to the content area without overriding the defaults:

new NeikiEditor('#editor', { customClass: 'article-content' });

.article-content {
  font-family: Georgia, serif;
  font-size: 18px;
  line-height: 1.8;
}

Localization

Eight languages are bundled: English (en, default), Czech (cs), Chinese (zh), Spanish (es), German (de), French (fr), Portuguese (pt), and Japanese (ja). Override or extend any string via translations, or register a language globally:

// Inline overrides (merged with built-ins)
new NeikiEditor('#editor', {
  language: 'en',
  translations: {
    'toolbar.bold': 'Make it bold',
    'placeholder': 'Start your story...'
  }
});

// Or register globally
NeikiEditor.addTranslation('de', {
  'toolbar.bold': 'Fett (Strg+B)'
});

Autosave

Autosave is toggled from the More menu (⋯). When enabled, content is written to localStorage on change and restored on the next page load (only while autosave is still enabled). Keys are scoped by page URL and editor identity; use autosaveKey to isolate drafts when the same URL edits different records:

new NeikiEditor('#editor', { autosaveKey: 'article-42' });

Autosave is intended for drafts and recovery. For production persistence, use the onSave or onChange callbacks to save to your backend.

API

Methods are called on the editor instance unless noted as static.

// Content
editor.getContent();                 // HTML string  (alias: getHTML)
editor.setContent('<p>Hello</p>');   //              (alias: setHTML)
editor.getText();                    // plain text
editor.isEmpty();                    // boolean
editor.getJSON();                    // structured JSON
editor.setJSON(json);
editor.insertHTML('<mark>hi</mark>');// insert at cursor
editor.clearAll();

// Selection
editor.getSelection();
editor.wrapSelection('mark', { class: 'highlight' });
editor.unwrapSelection('mark');

// Control
editor.focus();
editor.blur();
editor.enable();
editor.disable();
editor.destroy();                    // remove editor, restore original element
editor.toggleFullscreen();
editor.triggerSave();                // trigger onSave
editor.previewContent();             // open preview modal
editor.downloadContent();            // download as .html

// Theme
editor.setTheme('dark');
editor.toggleTheme();

// Commands
editor.execCommand('bold');
editor.execCommand('foreColor', '#ff0000');

// Static (plugins)
NeikiEditor.registerPlugin({ /* ... */ });
NeikiEditor.getPlugins();            // array of registered plugins
NeikiEditor.addTranslation('de', { /* ... */ });

In SPA frameworks, always call editor.destroy() when the component unmounts to clean up listeners and avoid memory leaks.

Useful instance properties include editor.contentArea (the contenteditable element) and editor.toolbar (the toolbar element), which are handy inside plugin init hooks. See the full API Reference.

Plugin API

Register a plugin globally to add a custom toolbar button and/or run code when the editor initializes. Reference the plugin by its name in the toolbar array.

NeikiEditor.registerPlugin({
  name: 'word-counter',                                   // required, unique
  icon: '<svg viewBox="0 0 24 24">...</svg>',             // optional toolbar icon
  tooltip: 'Show Word Count',                             // optional
  action: function (editor) {                             // optional, on click
    const words = editor.getText().trim().split(/\s+/).filter(Boolean).length;
    alert('Word count: ' + words);
  },
  init: function (editor) {                               // optional, runs once
    console.log('Plugin initialized!');
  }
});

new NeikiEditor('#editor', {
  toolbar: ['bold', 'italic', '|', 'word-counter', '|', 'moreMenu']
});

| Property | Type | Required | Description | |----------|------|----------|-------------| | name | string | Yes | Unique identifier, referenced in the toolbar array | | icon | string | No | SVG markup for the toolbar button | | tooltip | string | No | Hover tooltip text | | action | function(editor) | No | Called when the button is clicked | | init | function(editor) | No | Called once when the editor initializes |

Keyboard shortcuts

| Shortcut | Action | |----------|--------| | Ctrl+B | Bold | | Ctrl+I | Italic | | Ctrl+U | Underline | | Ctrl+K | Insert link | | Ctrl+S | Save (triggers onSave) | | Ctrl+Z | Undo | | Ctrl+Y / Ctrl+Shift+Z | Redo | | Tab / Shift+Tab | Indent / Outdent |

Integration notes

PHP helper (recommended for PHP apps)

The repository includes php/neiki-editor.php, a helper for asset loading, rendering, and sanitization.

<?php require_once 'php/neiki-editor.php'; ?>
<head>
    <?= NeikiEditor::assets() ?>
</head>
<body>
    <form method="POST" action="save.php">
        <?= NeikiEditor::render('content', $article->body, [
            'minHeight'   => 400,
            'placeholder' => 'Write your article...'
        ]) ?>
        <button type="submit">Save</button>
    </form>
</body>

// save.php — sanitize before saving to the database
require_once 'php/neiki-editor.php';
$clean = NeikiEditor::sanitize($_POST['content']);
$db->save($clean);

| Method | Description | |--------|-------------| | NeikiEditor::assets() | Output CDN CSS & JS tags. Call once per page. | | NeikiEditor::assets(true, '/path/to/dist') | Use local files instead of the CDN. | | NeikiEditor::render($id, $content, $options) | Render the textarea plus initialization script. | | NeikiEditor::sanitize($html) | Strip dangerous tags/attributes before saving. |

PHP form (manual)

If you prefer not to use the helper, render a plain <textarea> and initialize the editor yourself:

<form method="POST" action="save.php">
    <textarea id="editor" name="content"><?= htmlspecialchars($article->content) ?></textarea>
    <button type="submit">Save</button>
</form>

<script>
    const editor = new NeikiEditor('#editor');
</script>

React

import { useEffect, useRef } from 'react';

function NeikiEditorComponent({ value, onChange }) {
  const ref = useRef(null);
  const editorRef = useRef(null);

  useEffect(() => {
    editorRef.current = new NeikiEditor(ref.current, {
      onChange: (content) => onChange?.(content)
    });
    if (value) editorRef.current.setContent(value);
    return () => editorRef.current?.destroy();
  }, []); // initialize once

  return <textarea ref={ref} defaultValue={value} />;
}

Do not include value in the effect dependency array — that would recreate the editor on every keystroke. Update content imperatively with setContent() instead.

Vue 3 (Composition API)

<template>
  <textarea ref="editorEl"></textarea>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';

const props = defineProps({ modelValue: { type: String, default: '' } });
const emit = defineEmits(['update:modelValue']);
const editorEl = ref(null);
let editor = null;

onMounted(() => {
  editor = new NeikiEditor(editorEl.value, {
    onChange: (content) => emit('update:modelValue', content)
  });
  if (props.modelValue) editor.setContent(props.modelValue);
});

onBeforeUnmount(() => editor?.destroy());
</script>

AJAX auto-save

const editor = new NeikiEditor('#editor', {
  onChange: debounce(function (content) {
    fetch('/api/save', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ content })
    });
  }, 2000)
});

The wiki also includes a Laravel Blade example and a full integration checklist.

Security notes

Neiki's Editor sanitizes all HTML that enters the editor (textarea content, setContent(), insertHTML(), and autosave restoration). The client-side sanitizer strips dangerous tags such as <script> and <iframe>, removes event-handler attributes like onclick and onerror, and blocks javascript: protocol URLs.

Client-side sanitization is defense-in-depth — it does not replace server-side sanitization. Always validate and sanitize submitted HTML on the server before storing it or showing it to other users. The bundled PHP helper provides NeikiEditor::sanitize() for this purpose.

A few additional considerations:

• Autosave is not encrypted. Content saved to localStorage is readable by any JavaScript on the same origin. Disable autosave for sensitive content and save to your backend instead.
• Content Security Policy. The editor applies inline styles for font sizes, colors, and image dimensions, so a strict CSP will need to allow 'unsafe-inline' for style-src for those features to work. See the Security page for example CSP directives.

Documentation

Full documentation lives in the project wiki:

• Home
• Getting Started
• Configuration
• Toolbar Reference
• API Reference
• Plugin API
• Integration Guide
• Advanced Features
• Themes & Styling
• Security

Live demo: https://neikiri.dev/editor

Browser support

Neiki's Editor uses contentEditable and standard DOM APIs and targets current versions of modern browsers.

| Browser | Support | |---------|---------| | Chrome | Latest | | Firefox | Latest | | Safari | Latest | | Edge | Latest | | Opera | Latest |

Internet Explorer is not supported.

File structure

neiki-editor/
├── .github/
│   └── workflows/
│       ├── ci.yml                # Continuous integration workflow
│       ├── codeql.yml            # CodeQL security analysis
│       └── publish.yml           # NPM/CDN publish workflow
├── assets/
│   ├── logo.png                  # Project logo
│   └── preview.png               # Editor preview screenshot
├── demo/
│   ├── index.html                # Interactive demo page
│   └── logo.png                  # Demo page logo
├── dist/
│   ├── neiki-editor.css          # Editor styles (unminified)
│   ├── neiki-editor.js           # Editor core (unminified)
│   ├── neiki-editor.min.css      # Minified styles
│   └── neiki-editor.min.js       # Minified editor + embedded CSS (recommended)
├── php/
│   └── neiki-editor.php          # PHP integration helper
├── src/
│   ├── neiki-editor.css          # Source CSS styles
│   └── neiki-editor.js           # Source JavaScript
├── .gitattributes
├── .gitignore
├── CHANGELOG.md
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── SECURITY.md
├── package-lock.json
└── package.json

Contributing

Contributions are welcome. Please review CONTRIBUTING.md and the CODE_OF_CONDUCT.md before opening an issue or pull request. Security-related reports should follow SECURITY.md.

The editor source lives in src/ (neiki-editor.js, neiki-editor.css); the distributable builds are in dist/.

License

Released under the GNU Affero General Public License v3.0 (AGPL-3.0-or-later). See the LICENSE file for details.