Home

Neiki's Editor Documentation

Lightweight WYSIWYG Rich Text Editor
Easy to integrate, fully customizable, zero dependencies.

---

👋 Welcome

Welcome to the official Neiki's Editor documentation. This wiki covers everything from a 2-minute quick start to advanced plugin development, full API reference, and framework integrations.

[!TIP]
New here? Jump straight to 🚀 Getting Started — you'll have a working editor on your page in under 2 minutes.

---

📚 Documentation Pages

🟦 Start Here

🚀 Getting Started
Install, initialize, first steps

⚙️ Configuration
All options with examples

🔧 Toolbar Reference
Every toolbar button explained

🟩 Build & Extend

🔌 Plugin API
Create custom toolbar extensions

🔗 Integration Guide
PHP, Vue, React, Laravel

📋 API Reference
All methods & callbacks

🟨 Deep Dives

🧩 Advanced Features
Tables, images, video, i18n

🎨 Themes & Styling
Theming, CSS customization

🔒 Security
Sanitization, XSS protection

🟥 Project

📋 Changelog
Version history & release notes

---

⚡ 30-Second Quick Start

<!-- 1. Include (CSS auto-bundled) -->
<script src="https://cdn.neikiri.dev/neiki-editor/neiki-editor.min.js"></script>

<!-- 2. Add a textarea -->
<textarea id="editor"></textarea>

<!-- 3. Initialize -->
<script>
  const editor = new NeikiEditor('#editor');
</script>

[!NOTE]
Zero config required. The <textarea> is replaced by a full-featured WYSIWYG editor automatically.

---

✨ Feature Highlights

✍️ Rich Text

• Bold, italic, underline, strikethrough
• Headings H1–H6, font size widget, font family
• Text & background color pickers (palette + hex)
• Subscript, superscript, inline code, code blocks
• Remove formatting

---

📊 Content Blocks

• Tables — context menu, column resize, merge/split cells
• Images — URL, file upload, drag & drop, clipboard paste, resize handles
• Video — URL or file upload with videoUploadHandler
• Block drag & drop reordering with grip handles
• Blockquotes, horizontal rules, lists

---

🎨 UI & Themes

• 4 built-in themes: Light, Dark, Blue, Dark Blue
• Floating toolbar on text selection
• Fullscreen editing mode
• Status bar (word count, character count, block type)
• Autosave with localStorage

---

🔌 Developer

• Zero dependencies — single file drop-in
• Plugin API for custom toolbar buttons
• PHP integration helper with sanitization
• Vue 2/3 & React compatible
• 8 built-in UI languages (en, cs, zh, es, de, fr, pt, ja)

---

⌨️ Keyboard Shortcuts

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

---

🌐 Browser Support

Browser	Supported
Chrome	✅ Latest
Firefox	✅ Latest
Safari	✅ Latest
Edge	✅ Latest
Opera	✅ Latest
Internet Explorer	❌ Not supported

[!IMPORTANT]
Neiki's Editor uses contentEditable and standard DOM APIs. All modern browsers are supported. Internet Explorer is not supported.

---

📁 Project Structure

neiki-editor/
├── dist/
│   ├── neiki-editor.min.js     # ← Use this (minified, CSS bundled)
│   ├── neiki-editor.min.css
│   ├── neiki-editor.js
│   └── neiki-editor.css
├── demo/
│   └── index.html
├── php/
│   └── neiki-editor.php        # PHP integration helper
├── README.md
├── CHANGELOG.md
├── LICENSE
└── package.json

---

📄 License

Released under the GNU AGPLv3 License.

---

_{Made with ❤️ · Live Demo · GitHub}