neiki-editor 2.8.0 → 2.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +729 -716
  2. package/dist/neiki-editor.css +2212 -2204
  3. package/dist/neiki-editor.js +5140 -5003
  4. package/dist/neiki-editor.min.css +1 -1
  5. package/dist/neiki-editor.min.js +1 -1
  6. package/package.json +1 -1
package/README.md CHANGED
@@ -1,716 +1,729 @@
1
- <h1 align="center">Neiki Editor</h1>
2
-
3
- <p align="center">
4
- <img src="logo.png" alt="neiki-editor" width="400">
5
- </p>
6
-
7
- <p align="center">
8
- <img src="https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E" alt="JavaScript">
9
- <img src="https://img.shields.io/badge/php-%23777BB4.svg?style=for-the-badge&logo=php&logoColor=white" alt="PHP">
10
- <img src="https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white" alt="HTML5">
11
- <img src="https://img.shields.io/badge/css-%23663399.svg?style=for-the-badge&logo=css&logoColor=white" alt="CSS">
12
- <br>
13
- <img src="https://img.shields.io/badge/License-MIT-2563EB?style=for-the-badge&logo=open-source-initiative&logoColor=white&labelColor=000F15&logoWidth=20" alt="License">
14
- <img src="https://img.shields.io/badge/Version-2.8.0-2563EB?style=for-the-badge&logo=semantic-release&logoColor=white&labelColor=000F15&logoWidth=20" alt="Version">
15
- </p>
16
-
17
- <p align="center">
18
- <b>Lightweight WYSIWYG Rich Text Editor</b><br>
19
- <i>Easy to integrate, fully customizable, zero dependencies.</i>
20
- </p>
21
-
22
- <p align="center">
23
- <img src="https://img.shields.io/badge/Features-30%2B%20Tools-3b82f6?style=flat&labelColor=383C43" />
24
- <img src="https://img.shields.io/badge/Themes-Light%20%26%20Dark-8b5cf6?style=flat&labelColor=383C43" />
25
- <img src="https://img.shields.io/badge/Setup-Zero%20Config-22c55e?style=flat&labelColor=383C43" />
26
- <img src="https://img.shields.io/badge/Size-Lightweight-f97316?style=flat&labelColor=383C43" />
27
- </p>
28
-
29
- ---
30
- <p align="center">
31
- <img src="preview.png" alt="neiki-editor" width="902">
32
- </p>
33
-
34
- **Live version:** [https://neiki.eu/editor](https://neiki.eu/editor)
35
-
36
- ---
37
- ## 📦 Installation
38
-
39
- Add this single line — CSS is included automatically, always the **latest version**:
40
-
41
- ```html
42
- <script src="https://cdn.neiki.eu/neiki-editor/neiki-editor.min.js"></script>
43
- ```
44
-
45
- <details>
46
- <summary><b>📋 More installation options</b> (pinned version, separate CSS/JS, jsDelivr, npm, self-hosted)</summary>
47
- <br>
48
-
49
- #### Pin a specific version
50
-
51
- ```html
52
- <script src="https://cdn.neiki.eu/neiki-editor/2.8.0/neiki-editor.min.js"></script>
53
- ```
54
-
55
- #### Load CSS and JS separately
56
-
57
- ```html
58
- <!-- Latest -->
59
- <link rel="stylesheet" href="https://cdn.neiki.eu/neiki-editor/neiki-editor.css">
60
- <script src="https://cdn.neiki.eu/neiki-editor/neiki-editor.js"></script>
61
-
62
- <!-- Or pinned -->
63
- <link rel="stylesheet" href="https://cdn.neiki.eu/neiki-editor/2.8.0/neiki-editor.css">
64
- <script src="https://cdn.neiki.eu/neiki-editor/2.8.0/neiki-editor.js"></script>
65
- ```
66
-
67
- #### Alternative CDN — jsDelivr
68
-
69
- ```html
70
- <!-- Latest -->
71
- <script src="https://cdn.jsdelivr.net/gh/neikiri/neiki-editor@latest/dist/neiki-editor.min.js"></script>
72
-
73
- <!-- Pinned -->
74
- <script src="https://cdn.jsdelivr.net/gh/neikiri/neiki-editor@2.8.0/dist/neiki-editor.min.js"></script>
75
-
76
- <!-- Separate files (latest) -->
77
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/neikiri/neiki-editor@latest/dist/neiki-editor.css">
78
- <script src="https://cdn.jsdelivr.net/gh/neikiri/neiki-editor@latest/dist/neiki-editor.js"></script>
79
-
80
- <!-- Separate files (pinned) -->
81
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/neikiri/neiki-editor@2.8.0/dist/neiki-editor.css">
82
- <script src="https://cdn.jsdelivr.net/gh/neikiri/neiki-editor@2.8.0/dist/neiki-editor.js"></script>
83
- ```
84
-
85
- #### Package Manager
86
-
87
- ```bash
88
- npm install neiki-editor
89
- # or
90
- yarn add neiki-editor
91
- # or
92
- pnpm add neiki-editor
93
- ```
94
-
95
- #### Self-hosted
96
-
97
- ```html
98
- <script src="path/to/neiki-editor.min.js"></script>
99
-
100
- <!-- Or separate files -->
101
- <link rel="stylesheet" href="path/to/neiki-editor.css">
102
- <script src="path/to/neiki-editor.js"></script>
103
- ```
104
-
105
- </details>
106
-
107
- ---
108
-
109
- ## 🚀 Quick Start
110
-
111
- ```html
112
- <textarea id="editor"></textarea>
113
-
114
- <script>
115
- const editor = new NeikiEditor('#editor');
116
- </script>
117
- ```
118
-
119
- That's it — zero config required. The editor replaces the `<textarea>` with a full-featured WYSIWYG editor.
120
-
121
- ---
122
-
123
- ## ⚙️ Configuration
124
-
125
- ```javascript
126
- const editor = new NeikiEditor('#editor', {
127
- placeholder: 'Start typing...',
128
- minHeight: 300,
129
- maxHeight: 600,
130
- autofocus: false,
131
- spellcheck: true,
132
- readonly: false,
133
- theme: 'light', // 'light' or 'dark'
134
- language: 'en', // 'en', 'cs', or custom via addTranslation()
135
- translations: null, // custom translation keys (merged with built-in)
136
- toolbar: [
137
- 'viewCode', 'undo', 'redo', 'findReplace', '|',
138
- 'bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'removeFormat', '|',
139
- 'heading', 'fontFamily', 'fontSize', '|',
140
- 'foreColor', 'backColor', '|',
141
- 'alignLeft', 'alignCenter', 'alignRight', 'alignJustify', '|',
142
- 'indent', 'outdent', '|',
143
- 'bulletList', 'numberedList', 'blockquote', 'horizontalRule', '|',
144
- 'insertDropdown', '|',
145
- 'moreMenu'
146
- ],
147
- onChange: function(content, editor) {
148
- console.log('Content changed:', content);
149
- },
150
- onSave: function(content, editor) {
151
- console.log('Save triggered:', content);
152
- },
153
- onReady: function(editor) {
154
- console.log('Editor is ready!');
155
- }
156
- });
157
- ```
158
-
159
- ### Configuration Options
160
-
161
- | Option | Type | Default | Description |
162
- |--------|------|---------|-------------|
163
- | `placeholder` | `string` | `'Start typing...'` | Placeholder text when editor is empty |
164
- | `minHeight` | `number` | `300` | Minimum height in pixels |
165
- | `maxHeight` | `number\|null` | `null` | Maximum height in pixels (enables scroll) |
166
- | `autofocus` | `boolean` | `false` | Focus editor on initialization |
167
- | `spellcheck` | `boolean` | `true` | Enable browser spellcheck |
168
- | `readonly` | `boolean` | `false` | Make editor read-only |
169
- | `theme` | `string` | `'light'` | `'light'` or `'dark'` |
170
- | `language` | `string` | `'en'` | UI language — `en`, `cs`, `zh`, `es`, `de`, `fr`, `pt`, `ja` |
171
- | `translations` | `object\|null` | `null` | Custom translation keys (merged with built-in) |
172
- | `toolbar` | `array` | *(see above)* | Toolbar button configuration |
173
- | `onChange` | `function\|null` | `null` | Callback on content change |
174
- | `onSave` | `function\|null` | `null` | Callback on save (triggered by Ctrl+S or More menu → Save) |
175
- | `onFocus` | `function\|null` | `null` | Callback when editor gains focus |
176
- | `onBlur` | `function\|null` | `null` | Callback when editor loses focus |
177
- | `onReady` | `function\|null` | `null` | Callback when editor is ready |
178
- | `showHelp` | `boolean` | `true` | Show Help button in More menu (⋯) |
179
-
180
- ---
181
-
182
- ## 🔧 Toolbar Buttons
183
-
184
- Use the `toolbar` array to customize which buttons appear and in what order. Use `'|'` for a visual separator between groups. Groups of buttons between separators wrap as whole units on smaller screens.
185
-
186
- ### Text Formatting
187
-
188
- | Button | Description |
189
- |--------|-------------|
190
- | `bold` | Bold text (**Ctrl+B**) |
191
- | `italic` | Italic text (**Ctrl+I**) |
192
- | `underline` | Underline text (**Ctrl+U**) |
193
- | `strikethrough` | Strikethrough text |
194
- | `subscript` | Subscript text |
195
- | `superscript` | Superscript text |
196
- | `removeFormat` | Remove all formatting |
197
-
198
- > **Note:** When no text is selected, formatting commands (including Remove Formatting) automatically expand to the word at the cursor position.
199
-
200
- ### Text Style
201
-
202
- | Button | Type | Description |
203
- |--------|------|-------------|
204
- | `heading` | Select | Paragraph, H1, H2, H3, H4, H5, H6. Defaults to Paragraph. |
205
- | `fontSize` | Widget | Font size widget with **[−]** / **[+]** buttons, text input, and dropdown presets: 8, 9, 10, 11, 12, 14, 18, 24, 30, 36, 48, 60, 72, 96 |
206
- | `fontFamily` | Select | Sans Serif (Arial), Serif (Georgia), Monospace (Consolas), Cursive (Comic Sans MS) |
207
- | `foreColor` | Color Picker | Text color — palette, native color input, hex code input |
208
- | `backColor` | Color Picker | Background color — palette, native color input, hex code input |
209
-
210
- ### Alignment & Lists
211
-
212
- | Button | Description |
213
- |--------|-------------|
214
- | `alignLeft` | Align text left |
215
- | `alignCenter` | Center text |
216
- | `alignRight` | Align text right |
217
- | `alignJustify` | Justify text |
218
- | `bulletList` | Unordered list |
219
- | `numberedList` | Ordered list |
220
- | `indent` | Increase indent |
221
- | `outdent` | Decrease indent |
222
-
223
- ### Insert Dropdown
224
-
225
- The `insertDropdown` toolbar item renders a single **Insert** button that opens a dropdown containing:
226
-
227
- | Item | Description |
228
- |------|-------------|
229
- | **Link** | Insert/edit hyperlink (**Ctrl+K**) |
230
- | **Image** | Insert image (URL or file upload → base64) |
231
- | **Table** | Insert table with custom rows/columns |
232
- | **Emoji** | Emoji picker (100+ emojis) |
233
- | **Symbol** | Special characters (©, ®, €, π, Ω, arrows, etc.) |
234
-
235
- You can still use `link`, `image`, `table`, `emoji`, `specialChars` as standalone toolbar buttons if preferred.
236
-
237
- ### More Menu
238
-
239
- The `moreMenu` toolbar item renders a **⋯** button (pushed to the right) that opens a dropdown containing:
240
-
241
- | Item | Description |
242
- |------|-------------|
243
- | **Save** | Trigger the `onSave` callback |
244
- | **Preview** | Open a document preview modal |
245
- | **Download** | Download content as an HTML file |
246
- | **Print** | Print editor content |
247
- | **Autosave** | Toggle autosave to localStorage |
248
- | **Clear all** | Clear all editor content |
249
- | **Toggle Theme** | Switch between light/dark theme |
250
- | **Fullscreen** | Toggle fullscreen mode |
251
- | **Help** | Show help modal with author, version, and links (configurable via `showHelp`) |
252
-
253
- ### Standalone Tools
254
-
255
- | Button | Description |
256
- |--------|-------------|
257
- | `undo` | Undo (**Ctrl+Z**) |
258
- | `redo` | Redo (**Ctrl+Y** / **Ctrl+Shift+Z**) |
259
- | `findReplace` | Find & Replace with regex support |
260
- | `viewCode` | Toggle HTML source editor |
261
- | `blockquote` | Block quote |
262
- | `horizontalRule` | Horizontal line |
263
-
264
- ---
265
-
266
- ## 🎨 Themes
267
-
268
- Neiki Editor ships with **Light** and **Dark** themes.
269
-
270
- ### Set theme on init:
271
-
272
- ```javascript
273
- const editor = new NeikiEditor('#editor', {
274
- theme: 'dark'
275
- });
276
- ```
277
-
278
- ### Toggle theme at runtime:
279
-
280
- Use the **Toggle Theme** item in the More menu (⋯), or toggle programmatically:
281
-
282
- ```javascript
283
- editor.toggleTheme();
284
- // or set a specific theme:
285
- editor.setTheme('dark');
286
- ```
287
-
288
- The selected theme persists across page reloads via `localStorage`.
289
-
290
- ---
291
-
292
- ## 🌍 Localization (i18n)
293
-
294
- Neiki Editor supports multiple UI languages. Built-in:
295
-
296
- - **English** (`en`) — default
297
- - **Czech** (`cs`)
298
- - **Chinese** (`zh`)
299
- - **Spanish** (`es`)
300
- - **German** (`de`)
301
- - **French** (`fr`)
302
- - **Portuguese** (`pt`)
303
- - **Japanese** (`ja`)
304
-
305
- ### Set language on init:
306
-
307
- ```javascript
308
- const editor = new NeikiEditor('#editor', {
309
- language: 'cs' // Czech UI
310
- });
311
- ```
312
-
313
- ### Custom translations
314
-
315
- Add your own language or override existing translations using the static method:
316
-
317
- ```javascript
318
- NeikiEditor.addTranslation('de', {
319
- 'toolbar.bold': 'Fett (Strg+B)',
320
- 'toolbar.italic': 'Kursiv (Strg+I)',
321
- 'toolbar.undo': 'Rückgängig (Strg+Z)',
322
- // only override what you need — English is the fallback
323
- });
324
-
325
- const editor = new NeikiEditor('#editor', { language: 'de' });
326
- ```
327
-
328
- Or pass translations directly in config:
329
-
330
- ```javascript
331
- const editor = new NeikiEditor('#editor', {
332
- language: 'de',
333
- translations: {
334
- de: {
335
- 'toolbar.bold': 'Fett (Strg+B)',
336
- 'toolbar.italic': 'Kursiv (Strg+I)',
337
- // ...
338
- }
339
- }
340
- });
341
- ```
342
-
343
- All toolbar tooltips, modal dialogs, status bar texts, and system messages are translatable.
344
-
345
- ---
346
-
347
- ## 💾 Autosave
348
-
349
- Autosave is accessible from the **More menu** (⋯) in the default toolbar. When activated:
350
-
351
- - Content is saved to `localStorage` on every content change (debounced)
352
- - The status bar shows "Autosaving..." / "Saved locally"
353
- - Content is restored on page reload **only when autosave was enabled**
354
-
355
- > **Note:** For production use (CMS, blog, etc.), use the `onSave` callback or `onChange` callback to save content to your database instead.
356
-
357
- ---
358
-
359
- ## 📋 API Methods
360
-
361
- ### Content
362
-
363
- ```javascript
364
- editor.getContent(); // Get HTML content
365
- editor.setContent('<p>Hello</p>'); // Set HTML content
366
- editor.getText(); // Get plain text content
367
- editor.isEmpty(); // Check if editor is empty
368
-
369
- editor.getHTML(); // Alias for getContent()
370
- editor.setHTML(html); // Alias for setContent()
371
-
372
- editor.getJSON(); // Get structured JSON representation
373
- editor.setJSON(json); // Set content from JSON
374
- ```
375
-
376
- ### Editor Control
377
-
378
- ```javascript
379
- editor.focus(); // Focus the editor
380
- editor.blur(); // Blur the editor
381
- editor.enable(); // Enable editing
382
- editor.disable(); // Disable editing (read-only)
383
- editor.destroy(); // Remove editor, restore original element
384
- editor.toggleFullscreen(); // Toggle fullscreen mode
385
- editor.toggleTheme(); // Toggle light/dark theme
386
- editor.setTheme('dark'); // Set a specific theme
387
- editor.triggerSave(); // Trigger onSave callback
388
- editor.previewContent(); // Open preview modal
389
- editor.downloadContent(); // Download content as HTML file
390
- editor.clearAll(); // Clear all content
391
- ```
392
-
393
- ### Localization
394
-
395
- ```javascript
396
- NeikiEditor.addTranslation('de', { ... }); // Add/override translations (static)
397
- ```
398
-
399
- ### Command Execution
400
-
401
- ```javascript
402
- editor.execCommand('bold'); // Execute a command
403
- editor.insertHTML('<span>Hello</span>'); // Insert HTML at cursor
404
- editor.wrapSelection('mark', { class: 'highlight' }); // Wrap selection
405
- editor.unwrapSelection('mark'); // Unwrap selection
406
- ```
407
-
408
- ### Selection
409
-
410
- ```javascript
411
- editor.getSelection(); // Get current Selection object
412
- ```
413
-
414
- ---
415
-
416
- ## 🔌 Plugin API
417
-
418
- Extend the editor with custom plugins:
419
-
420
- ```javascript
421
- NeikiEditor.registerPlugin({
422
- name: 'word-counter-alert',
423
- icon: '<svg viewBox="0 0 24 24">...</svg>', // optional toolbar button
424
- tooltip: 'Show Word Count',
425
- action: function(editor) {
426
- const text = editor.getContent().replace(/<[^>]*>/g, '');
427
- const words = text.trim().split(/\s+/).filter(Boolean).length;
428
- alert('Word count: ' + words);
429
- },
430
- init: function(editor) {
431
- // Called once when editor initializes (optional)
432
- console.log('Plugin initialized!');
433
- }
434
- });
435
- ```
436
-
437
- ### Plugin Properties
438
-
439
- | Property | Type | Required | Description |
440
- |----------|------|----------|-------------|
441
- | `name` | `string` | ✅ | Unique plugin identifier |
442
- | `icon` | `string` | ❌ | SVG icon for toolbar button |
443
- | `tooltip` | `string` | ❌ | Button tooltip text |
444
- | `action` | `function` | ❌ | Called when toolbar button is clicked |
445
- | `init` | `function` | ❌ | Called once during editor initialization |
446
-
447
- ### List Registered Plugins
448
-
449
- ```javascript
450
- NeikiEditor.getPlugins(); // Returns array of registered plugins
451
- ```
452
-
453
- ---
454
-
455
- ## 📊 Table Features
456
-
457
- Insert tables via the toolbar button with configurable rows, columns, and optional header row.
458
-
459
- ### Table Context Menu
460
-
461
- Right-click on any table cell to access:
462
-
463
- - **Insert Row Above / Below**
464
- - **Insert Column Left / Right**
465
- - **Delete Row / Column / Table**
466
- - **Merge Cells** — merge selected cells horizontally
467
- - **Split Cell** — split a previously merged cell
468
-
469
- ### Column Resize
470
-
471
- Hover near any column border to reveal a **drag handle**. Drag to resize adjacent column widths. The table uses fixed layout during resize for precise control.
472
-
473
- ---
474
-
475
- ## 🖼️ Image Support
476
-
477
- ### Insert via URL
478
-
479
- Click the **Image** toolbar button and paste a URL.
480
-
481
- ### Upload from File
482
-
483
- The Image dialog includes a file upload input. Selected images are converted to **base64** and embedded directly in the content.
484
-
485
- ### Drag & Drop
486
-
487
- Drag image files directly into the editor content area. Images are automatically converted to base64 and inserted at the drop position.
488
-
489
- ### Resize Images
490
-
491
- Click any image in the editor to select it — **resize handles** appear on all four corners. Drag any handle to resize while maintaining aspect ratio. A live **size label** (width × height) is displayed below the image during resizing.
492
-
493
- ---
494
-
495
- ## 🔍 Find & Replace
496
-
497
- Open with the toolbar button or implement via the modal API.
498
-
499
- Features:
500
- - **Case-sensitive** search toggle
501
- - **Regular expression** support
502
- - **Find Next** — navigate through matches with highlighting
503
- - **Replace** — replace current match
504
- - **Replace All** — replace all matches at once
505
-
506
- ---
507
-
508
- ## ✏️ Floating Toolbar
509
-
510
- When you select text in the editor, a floating toolbar appears above the selection with quick access to:
511
-
512
- - **Move Block Up / Down** — reorder the current content block (left side)
513
- - **Bold, Italic, Underline, Strikethrough** — quick formatting
514
- - **Insert Link**
515
-
516
- The toolbar follows the selection and disappears when the selection is cleared.
517
-
518
- ---
519
-
520
- ## 🔀 Block Drag & Drop
521
-
522
- Hover over any content block (paragraph, heading, table, image, list, etc.) to reveal a **grip handle** (⠿) on the left side. Drag to reorder blocks within the editor. A ghost preview and drop placeholder guide the drop position.
523
-
524
- ---
525
-
526
- ## 🖨️ Print
527
-
528
- Click the **Print** button to open the browser print dialog with the editor content formatted for printing.
529
-
530
- ---
531
-
532
- ## ⌨️ Keyboard Shortcuts
533
-
534
- | Shortcut | Action |
535
- |----------|--------|
536
- | **Ctrl+B** | Bold |
537
- | **Ctrl+I** | Italic |
538
- | **Ctrl+U** | Underline |
539
- | **Ctrl+K** | Insert Link |
540
- | **Ctrl+S** | Save (triggers `onSave` callback) |
541
- | **Ctrl+Z** | Undo |
542
- | **Ctrl+Y** / **Ctrl+Shift+Z** | Redo |
543
- | **Tab** | Indent |
544
- | **Shift+Tab** | Outdent |
545
-
546
- ---
547
-
548
- ## 📐 Status Bar
549
-
550
- The editor includes a status bar at the bottom displaying:
551
-
552
- - **Left side:** Word count and character count
553
- - **Right side:** Autosave status (when enabled) and current block type (p, h1, h2, etc.)
554
-
555
- ---
556
-
557
- ## 🔗 Integration Examples
558
-
559
- ### PHP Helper (Recommended)
560
-
561
- Neiki Editor includes a PHP integration helper (`php/neiki-editor.php`) that provides asset loading, editor rendering, and HTML sanitization:
562
-
563
- ```php
564
- <?php require_once 'php/neiki-editor.php'; ?>
565
- <!DOCTYPE html>
566
- <html>
567
- <head>
568
- <?= NeikiEditor::assets() ?>
569
- </head>
570
- <body>
571
- <form method="POST" action="save.php">
572
- <?= NeikiEditor::render('content', $article->content, [
573
- 'minHeight' => 400,
574
- 'placeholder' => 'Write your article...'
575
- ]) ?>
576
- <button type="submit">Save</button>
577
- </form>
578
- </body>
579
- </html>
580
- ```
581
-
582
- ```php
583
- // save.php — sanitize before saving to database
584
- require_once 'php/neiki-editor.php';
585
- $clean = NeikiEditor::sanitize($_POST['content']);
586
- $db->save($clean);
587
- ```
588
-
589
- #### PHP Helper Methods
590
-
591
- | Method | Description |
592
- |--------|-------------|
593
- | `NeikiEditor::assets()` | Output CSS & JS tags (CDN). Call once per page. |
594
- | `NeikiEditor::assets(true, '/path/to/dist')` | Use local files instead of CDN. |
595
- | `NeikiEditor::render($id, $content, $options)` | Render textarea + init script. |
596
- | `NeikiEditor::sanitize($html)` | Strip dangerous tags/attributes before DB save. |
597
-
598
- ### PHP Form (Manual)
599
-
600
- ```php
601
- <form method="POST" action="save.php">
602
- <textarea id="editor" name="content"><?= htmlspecialchars($article->content) ?></textarea>
603
- <button type="submit">Save</button>
604
- </form>
605
-
606
- <script>
607
- const editor = new NeikiEditor('#editor');
608
- </script>
609
- ```
610
-
611
- ### AJAX Save
612
-
613
- ```javascript
614
- const editor = new NeikiEditor('#editor', {
615
- onChange: debounce(function(content) {
616
- fetch('/api/save', {
617
- method: 'POST',
618
- headers: { 'Content-Type': 'application/json' },
619
- body: JSON.stringify({ content })
620
- });
621
- }, 2000)
622
- });
623
- ```
624
-
625
- ### Vue.js
626
-
627
- ```vue
628
- <template>
629
- <textarea ref="editor"></textarea>
630
- </template>
631
-
632
- <script>
633
- export default {
634
- mounted() {
635
- this.editor = new NeikiEditor(this.$refs.editor, {
636
- onChange: (content) => {
637
- this.$emit('update:modelValue', content);
638
- }
639
- });
640
- },
641
- beforeUnmount() {
642
- this.editor.destroy();
643
- }
644
- }
645
- </script>
646
- ```
647
-
648
- ### React
649
-
650
- ```jsx
651
- import { useEffect, useRef } from 'react';
652
-
653
- function NeikiEditorComponent({ value, onChange }) {
654
- const ref = useRef(null);
655
- const editorRef = useRef(null);
656
-
657
- useEffect(() => {
658
- editorRef.current = new NeikiEditor(ref.current, {
659
- onChange: (content) => onChange?.(content)
660
- });
661
- return () => editorRef.current?.destroy();
662
- }, []);
663
-
664
- return <textarea ref={ref} defaultValue={value} />;
665
- }
666
- ```
667
-
668
- ---
669
-
670
- ## 🌐 Browser Support
671
-
672
- | Browser | Support |
673
- |---------|---------|
674
- | Chrome | ✅ Latest |
675
- | Firefox | ✅ Latest |
676
- | Safari | ✅ Latest |
677
- | Edge | ✅ Latest |
678
- | Opera | ✅ Latest |
679
-
680
- ---
681
-
682
- ## 📁 File Structure
683
-
684
- ```
685
- neiki-editor/
686
- ├── dist/
687
- │ ├── neiki-editor.min.js # Minified editor + embedded CSS (recommended)
688
- │ ├── neiki-editor.min.css # Minified styles
689
- │ ├── neiki-editor.js # Editor core (unminified)
690
- │ └── neiki-editor.css # Editor styles (unminified)
691
- ├── demo/
692
- │ └── index.html # Interactive demo page
693
- │ └── logo.png # Demo logo
694
- ├── php/
695
- │ └── neiki-editor.php # PHP integration helper
696
- ├── logo.png
697
- ├── package.json
698
- ├── README.md
699
- ├── LICENSE
700
- ├── CHANGELOG.md
701
- ├── CONTRIBUTING.md
702
- ├── CODE_OF_CONDUCT.md
703
- └── SECURITY.md
704
- ```
705
-
706
- ---
707
-
708
- ## 📄 License
709
-
710
- This project is licensed under the MIT License — see the [LICENSE](LICENSE) file for details.
711
-
712
- ---
713
-
714
- <p align="center">
715
- Made with ❤️ for the web community
716
- </p>
1
+ <p align="center">
2
+ <img src="logo.png" alt="Neiki's Editor" width="400">
3
+ </p>
4
+
5
+ <h1 align="center">Neiki's Editor</h1>
6
+
7
+ <p align="center">
8
+ <img src="https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E" alt="JavaScript">
9
+ <img src="https://img.shields.io/badge/php-%23777BB4.svg?style=for-the-badge&logo=php&logoColor=white" alt="PHP">
10
+ <img src="https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white" alt="HTML5">
11
+ <img src="https://img.shields.io/badge/css-%23663399.svg?style=for-the-badge&logo=css&logoColor=white" alt="CSS">
12
+ <br>
13
+ <img src="https://img.shields.io/badge/License-MIT-2563EB?style=for-the-badge&logo=open-source-initiative&logoColor=white&labelColor=000F15&logoWidth=20" alt="License">
14
+ <img src="https://img.shields.io/badge/Version-2.9.0-2563EB?style=for-the-badge&logo=semantic-release&logoColor=white&labelColor=000F15&logoWidth=20" alt="Version">
15
+ </p>
16
+
17
+ <p align="center">
18
+ <b>Lightweight WYSIWYG Rich Text Editor</b><br>
19
+ <i>Easy to integrate, fully customizable, zero dependencies.</i>
20
+ </p>
21
+
22
+ <p align="center">
23
+ <img src="https://img.shields.io/badge/Features-30%2B%20Tools-3b82f6?style=flat&labelColor=383C43" />
24
+ <img src="https://img.shields.io/badge/Themes-Light%20%26%20Dark-8b5cf6?style=flat&labelColor=383C43" />
25
+ <img src="https://img.shields.io/badge/Setup-Zero%20Config-22c55e?style=flat&labelColor=383C43" />
26
+ <img src="https://img.shields.io/badge/Size-Lightweight-f97316?style=flat&labelColor=383C43" />
27
+ </p>
28
+
29
+ <p align="center">
30
+ <a href="https://oosmetrics.com/repo/neikiri/neiki-editor"><img src="https://api.oosmetrics.com/api/v1/badge/achievement/875222f0-f55c-4209-b894-8bf60b75c590.svg" alt="oosmetrics"/></a>
31
+ <a href="https://oosmetrics.com/repo/neikiri/neiki-editor"><img src="https://api.oosmetrics.com/api/v1/badge/achievement/71eabb82-6f56-4dc3-bb41-e82a5f8cf939.svg" alt="oosmetrics"/></a>
32
+ </p>
33
+
34
+ ---
35
+ <p align="center">
36
+ <img src="preview.png" alt="Neiki's Editor" width="900">
37
+ </p>
38
+
39
+ ---
40
+
41
+ **Live version:** [https://neiki.eu/editor](https://neiki.eu/editor)
42
+
43
+ ---
44
+
45
+ ## 💡 Why Neiki's Editor?
46
+
47
+ Most WYSIWYG editors either pull in a tree of dependencies or force you into a heavyweight framework. Neiki's Editor is a **single file with zero dependencies** — drop one `<script>` tag into any page and you get 30+ formatting tools, drag-and-drop blocks, image resizing, a plugin API, and full i18n out of the box. It stays tiny enough for a quick prototype yet powerful enough for a production CMS, so you spend time writing content instead of wrestling with your editor.
48
+
49
+ ---
50
+ ## 📦 Installation
51
+
52
+ Add this single line — CSS is included automatically, always the **latest version**:
53
+
54
+ ```html
55
+ <script src="https://cdn.neiki.eu/neiki-editor/neiki-editor.min.js"></script>
56
+ ```
57
+
58
+ <details>
59
+ <summary><b>📋 More installation options</b> (pinned version, separate CSS/JS, jsDelivr, npm, self-hosted)</summary>
60
+ <br>
61
+
62
+ #### Pin a specific version
63
+
64
+ ```html
65
+ <script src="https://cdn.neiki.eu/neiki-editor/2.9.0/neiki-editor.min.js"></script>
66
+ ```
67
+
68
+ #### Load CSS and JS separately
69
+
70
+ ```html
71
+ <!-- Latest -->
72
+ <link rel="stylesheet" href="https://cdn.neiki.eu/neiki-editor/neiki-editor.css">
73
+ <script src="https://cdn.neiki.eu/neiki-editor/neiki-editor.js"></script>
74
+
75
+ <!-- Or pinned -->
76
+ <link rel="stylesheet" href="https://cdn.neiki.eu/neiki-editor/2.9.0/neiki-editor.css">
77
+ <script src="https://cdn.neiki.eu/neiki-editor/2.9.0/neiki-editor.js"></script>
78
+ ```
79
+
80
+ #### Alternative CDN — jsDelivr
81
+
82
+ ```html
83
+ <!-- Latest -->
84
+ <script src="https://cdn.jsdelivr.net/gh/neikiri/neiki-editor@latest/dist/neiki-editor.min.js"></script>
85
+
86
+ <!-- Pinned -->
87
+ <script src="https://cdn.jsdelivr.net/gh/neikiri/neiki-editor@2.9.0/dist/neiki-editor.min.js"></script>
88
+
89
+ <!-- Separate files (latest) -->
90
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/neikiri/neiki-editor@latest/dist/neiki-editor.css">
91
+ <script src="https://cdn.jsdelivr.net/gh/neikiri/neiki-editor@latest/dist/neiki-editor.js"></script>
92
+
93
+ <!-- Separate files (pinned) -->
94
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/neikiri/neiki-editor@2.9.0/dist/neiki-editor.css">
95
+ <script src="https://cdn.jsdelivr.net/gh/neikiri/neiki-editor@2.9.0/dist/neiki-editor.js"></script>
96
+ ```
97
+
98
+ #### Package Manager
99
+
100
+ ```bash
101
+ npm install neiki-editor
102
+ # or
103
+ yarn add neiki-editor
104
+ # or
105
+ pnpm add neiki-editor
106
+ ```
107
+
108
+ #### Self-hosted
109
+
110
+ ```html
111
+ <script src="path/to/neiki-editor.min.js"></script>
112
+
113
+ <!-- Or separate files -->
114
+ <link rel="stylesheet" href="path/to/neiki-editor.css">
115
+ <script src="path/to/neiki-editor.js"></script>
116
+ ```
117
+
118
+ </details>
119
+
120
+ ---
121
+
122
+ ## 🚀 Quick Start
123
+
124
+ ```html
125
+ <textarea id="editor"></textarea>
126
+
127
+ <script>
128
+ const editor = new NeikiEditor('#editor');
129
+ </script>
130
+ ```
131
+
132
+ That's it — zero config required. The editor replaces the `<textarea>` with a full-featured WYSIWYG editor.
133
+
134
+ ---
135
+
136
+ ## ⚙️ Configuration
137
+
138
+ ```javascript
139
+ const editor = new NeikiEditor('#editor', {
140
+ placeholder: 'Start typing...',
141
+ minHeight: 300,
142
+ maxHeight: 600,
143
+ autofocus: false,
144
+ spellcheck: true,
145
+ readonly: false,
146
+ theme: 'light', // 'light' or 'dark'
147
+ language: 'en', // 'en', 'cs', or custom via addTranslation()
148
+ translations: null, // custom translation keys (merged with built-in)
149
+ toolbar: [
150
+ 'viewCode', 'undo', 'redo', 'findReplace', '|',
151
+ 'bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'removeFormat', '|',
152
+ 'heading', 'fontFamily', 'fontSize', '|',
153
+ 'foreColor', 'backColor', '|',
154
+ 'alignLeft', 'alignCenter', 'alignRight', 'alignJustify', '|',
155
+ 'indent', 'outdent', '|',
156
+ 'bulletList', 'numberedList', 'blockquote', 'horizontalRule', '|',
157
+ 'insertDropdown', '|',
158
+ 'moreMenu'
159
+ ],
160
+ onChange: function(content, editor) {
161
+ console.log('Content changed:', content);
162
+ },
163
+ onSave: function(content, editor) {
164
+ console.log('Save triggered:', content);
165
+ },
166
+ onReady: function(editor) {
167
+ console.log('Editor is ready!');
168
+ }
169
+ });
170
+ ```
171
+
172
+ ### Configuration Options
173
+
174
+ | Option | Type | Default | Description |
175
+ |--------|------|---------|-------------|
176
+ | `placeholder` | `string` | `'Start typing...'` | Placeholder text when editor is empty |
177
+ | `minHeight` | `number` | `300` | Minimum height in pixels |
178
+ | `maxHeight` | `number\|null` | `null` | Maximum height in pixels (enables scroll) |
179
+ | `autofocus` | `boolean` | `false` | Focus editor on initialization |
180
+ | `spellcheck` | `boolean` | `true` | Enable browser spellcheck |
181
+ | `readonly` | `boolean` | `false` | Make editor read-only |
182
+ | `theme` | `string` | `'light'` | `'light'` or `'dark'` |
183
+ | `language` | `string` | `'en'` | UI language — `en`, `cs`, `zh`, `es`, `de`, `fr`, `pt`, `ja` |
184
+ | `translations` | `object\|null` | `null` | Custom translation keys (merged with built-in) |
185
+ | `toolbar` | `array` | *(see above)* | Toolbar button configuration |
186
+ | `onChange` | `function\|null` | `null` | Callback on content change |
187
+ | `onSave` | `function\|null` | `null` | Callback on save (triggered by Ctrl+S or More menu → Save) |
188
+ | `onFocus` | `function\|null` | `null` | Callback when editor gains focus |
189
+ | `onBlur` | `function\|null` | `null` | Callback when editor loses focus |
190
+ | `onReady` | `function\|null` | `null` | Callback when editor is ready |
191
+ | `showHelp` | `boolean` | `true` | Show Help button in More menu (⋯) |
192
+
193
+ ---
194
+
195
+ ## 🔧 Toolbar Buttons
196
+
197
+ Use the `toolbar` array to customize which buttons appear and in what order. Use `'|'` for a visual separator between groups. Groups of buttons between separators wrap as whole units on smaller screens.
198
+
199
+ ### Text Formatting
200
+
201
+ | Button | Description |
202
+ |--------|-------------|
203
+ | `bold` | Bold text (**Ctrl+B**) |
204
+ | `italic` | Italic text (**Ctrl+I**) |
205
+ | `underline` | Underline text (**Ctrl+U**) |
206
+ | `strikethrough` | Strikethrough text |
207
+ | `subscript` | Subscript text |
208
+ | `superscript` | Superscript text |
209
+ | `removeFormat` | Remove all formatting |
210
+
211
+ > **Note:** When no text is selected, formatting commands (including Remove Formatting) automatically expand to the word at the cursor position.
212
+
213
+ ### Text Style
214
+
215
+ | Button | Type | Description |
216
+ |--------|------|-------------|
217
+ | `heading` | Select | Paragraph, H1, H2, H3, H4, H5, H6. Defaults to Paragraph. |
218
+ | `fontSize` | Widget | Font size widget with **[−]** / **[+]** buttons, text input, and dropdown presets: 8, 9, 10, 11, 12, 14, 18, 24, 30, 36, 48, 60, 72, 96 |
219
+ | `fontFamily` | Select | Sans Serif (Arial), Serif (Georgia), Monospace (Consolas), Cursive (Comic Sans MS) |
220
+ | `foreColor` | Color Picker | Text color — palette, native color input, hex code input |
221
+ | `backColor` | Color Picker | Background color — palette, native color input, hex code input |
222
+
223
+ ### Alignment & Lists
224
+
225
+ | Button | Description |
226
+ |--------|-------------|
227
+ | `alignLeft` | Align text left |
228
+ | `alignCenter` | Center text |
229
+ | `alignRight` | Align text right |
230
+ | `alignJustify` | Justify text |
231
+ | `bulletList` | Unordered list |
232
+ | `numberedList` | Ordered list |
233
+ | `indent` | Increase indent |
234
+ | `outdent` | Decrease indent |
235
+
236
+ ### Insert Dropdown
237
+
238
+ The `insertDropdown` toolbar item renders a single **Insert** button that opens a dropdown containing:
239
+
240
+ | Item | Description |
241
+ |------|-------------|
242
+ | **Link** | Insert/edit hyperlink (**Ctrl+K**) |
243
+ | **Image** | Insert image (URL or file upload → base64) |
244
+ | **Table** | Insert table with custom rows/columns |
245
+ | **Emoji** | Emoji picker (100+ emojis) |
246
+ | **Symbol** | Special characters (©, ®, €, π, Ω, arrows, etc.) |
247
+
248
+ You can still use `link`, `image`, `table`, `emoji`, `specialChars` as standalone toolbar buttons if preferred.
249
+
250
+ ### More Menu
251
+
252
+ The `moreMenu` toolbar item renders a **⋯** button (pushed to the right) that opens a dropdown containing:
253
+
254
+ | Item | Description |
255
+ |------|-------------|
256
+ | **Save** | Trigger the `onSave` callback |
257
+ | **Preview** | Open a document preview modal |
258
+ | **Download** | Download content as an HTML file |
259
+ | **Print** | Print editor content |
260
+ | **Autosave** | Toggle autosave to localStorage |
261
+ | **Clear all** | Clear all editor content |
262
+ | **Toggle Theme** | Switch between light/dark theme |
263
+ | **Fullscreen** | Toggle fullscreen mode |
264
+ | **Help** | Show help modal with author, version, and links (configurable via `showHelp`) |
265
+
266
+ ### Standalone Tools
267
+
268
+ | Button | Description |
269
+ |--------|-------------|
270
+ | `undo` | Undo (**Ctrl+Z**) |
271
+ | `redo` | Redo (**Ctrl+Y** / **Ctrl+Shift+Z**) |
272
+ | `findReplace` | Find & Replace with regex support |
273
+ | `viewCode` | Toggle HTML source editor |
274
+ | `blockquote` | Block quote |
275
+ | `horizontalRule` | Horizontal line |
276
+
277
+ ---
278
+
279
+ ## 🎨 Themes
280
+
281
+ Neiki's Editor ships with **Light** and **Dark** themes.
282
+
283
+ ### Set theme on init:
284
+
285
+ ```javascript
286
+ const editor = new NeikiEditor('#editor', {
287
+ theme: 'dark'
288
+ });
289
+ ```
290
+
291
+ ### Toggle theme at runtime:
292
+
293
+ Use the **Toggle Theme** item in the More menu (⋯), or toggle programmatically:
294
+
295
+ ```javascript
296
+ editor.toggleTheme();
297
+ // or set a specific theme:
298
+ editor.setTheme('dark');
299
+ ```
300
+
301
+ The selected theme persists across page reloads via `localStorage`.
302
+
303
+ ---
304
+
305
+ ## 🌍 Localization (i18n)
306
+
307
+ Neiki's Editor supports multiple UI languages. Built-in:
308
+
309
+ - **English** (`en`) — default
310
+ - **Czech** (`cs`)
311
+ - **Chinese** (`zh`)
312
+ - **Spanish** (`es`)
313
+ - **German** (`de`)
314
+ - **French** (`fr`)
315
+ - **Portuguese** (`pt`)
316
+ - **Japanese** (`ja`)
317
+
318
+ ### Set language on init:
319
+
320
+ ```javascript
321
+ const editor = new NeikiEditor('#editor', {
322
+ language: 'cs' // Czech UI
323
+ });
324
+ ```
325
+
326
+ ### Custom translations
327
+
328
+ Add your own language or override existing translations using the static method:
329
+
330
+ ```javascript
331
+ NeikiEditor.addTranslation('de', {
332
+ 'toolbar.bold': 'Fett (Strg+B)',
333
+ 'toolbar.italic': 'Kursiv (Strg+I)',
334
+ 'toolbar.undo': 'Rückgängig (Strg+Z)',
335
+ // only override what you need — English is the fallback
336
+ });
337
+
338
+ const editor = new NeikiEditor('#editor', { language: 'de' });
339
+ ```
340
+
341
+ Or pass translations directly in config:
342
+
343
+ ```javascript
344
+ const editor = new NeikiEditor('#editor', {
345
+ language: 'de',
346
+ translations: {
347
+ de: {
348
+ 'toolbar.bold': 'Fett (Strg+B)',
349
+ 'toolbar.italic': 'Kursiv (Strg+I)',
350
+ // ...
351
+ }
352
+ }
353
+ });
354
+ ```
355
+
356
+ All toolbar tooltips, modal dialogs, status bar texts, and system messages are translatable.
357
+
358
+ ---
359
+
360
+ ## 💾 Autosave
361
+
362
+ Autosave is accessible from the **More menu** (⋯) in the default toolbar. When activated:
363
+
364
+ - Content is saved to `localStorage` on every content change (debounced)
365
+ - The status bar shows "Autosaving..." / "Saved locally"
366
+ - Content is restored on page reload **only when autosave was enabled**
367
+
368
+ > **Note:** For production use (CMS, blog, etc.), use the `onSave` callback or `onChange` callback to save content to your database instead.
369
+
370
+ ---
371
+
372
+ ## 📋 API Methods
373
+
374
+ ### Content
375
+
376
+ ```javascript
377
+ editor.getContent(); // Get HTML content
378
+ editor.setContent('<p>Hello</p>'); // Set HTML content
379
+ editor.getText(); // Get plain text content
380
+ editor.isEmpty(); // Check if editor is empty
381
+
382
+ editor.getHTML(); // Alias for getContent()
383
+ editor.setHTML(html); // Alias for setContent()
384
+
385
+ editor.getJSON(); // Get structured JSON representation
386
+ editor.setJSON(json); // Set content from JSON
387
+ ```
388
+
389
+ ### Editor Control
390
+
391
+ ```javascript
392
+ editor.focus(); // Focus the editor
393
+ editor.blur(); // Blur the editor
394
+ editor.enable(); // Enable editing
395
+ editor.disable(); // Disable editing (read-only)
396
+ editor.destroy(); // Remove editor, restore original element
397
+ editor.toggleFullscreen(); // Toggle fullscreen mode
398
+ editor.toggleTheme(); // Toggle light/dark theme
399
+ editor.setTheme('dark'); // Set a specific theme
400
+ editor.triggerSave(); // Trigger onSave callback
401
+ editor.previewContent(); // Open preview modal
402
+ editor.downloadContent(); // Download content as HTML file
403
+ editor.clearAll(); // Clear all content
404
+ ```
405
+
406
+ ### Localization
407
+
408
+ ```javascript
409
+ NeikiEditor.addTranslation('de', { ... }); // Add/override translations (static)
410
+ ```
411
+
412
+ ### Command Execution
413
+
414
+ ```javascript
415
+ editor.execCommand('bold'); // Execute a command
416
+ editor.insertHTML('<span>Hello</span>'); // Insert HTML at cursor
417
+ editor.wrapSelection('mark', { class: 'highlight' }); // Wrap selection
418
+ editor.unwrapSelection('mark'); // Unwrap selection
419
+ ```
420
+
421
+ ### Selection
422
+
423
+ ```javascript
424
+ editor.getSelection(); // Get current Selection object
425
+ ```
426
+
427
+ ---
428
+
429
+ ## 🔌 Plugin API
430
+
431
+ Extend the editor with custom plugins:
432
+
433
+ ```javascript
434
+ NeikiEditor.registerPlugin({
435
+ name: 'word-counter-alert',
436
+ icon: '<svg viewBox="0 0 24 24">...</svg>', // optional toolbar button
437
+ tooltip: 'Show Word Count',
438
+ action: function(editor) {
439
+ const text = editor.getContent().replace(/<[^>]*>/g, '');
440
+ const words = text.trim().split(/\s+/).filter(Boolean).length;
441
+ alert('Word count: ' + words);
442
+ },
443
+ init: function(editor) {
444
+ // Called once when editor initializes (optional)
445
+ console.log('Plugin initialized!');
446
+ }
447
+ });
448
+ ```
449
+
450
+ ### Plugin Properties
451
+
452
+ | Property | Type | Required | Description |
453
+ |----------|------|----------|-------------|
454
+ | `name` | `string` | ✅ | Unique plugin identifier |
455
+ | `icon` | `string` | ❌ | SVG icon for toolbar button |
456
+ | `tooltip` | `string` | ❌ | Button tooltip text |
457
+ | `action` | `function` | ❌ | Called when toolbar button is clicked |
458
+ | `init` | `function` | ❌ | Called once during editor initialization |
459
+
460
+ ### List Registered Plugins
461
+
462
+ ```javascript
463
+ NeikiEditor.getPlugins(); // Returns array of registered plugins
464
+ ```
465
+
466
+ ---
467
+
468
+ ## 📊 Table Features
469
+
470
+ Insert tables via the toolbar button with configurable rows, columns, and optional header row.
471
+
472
+ ### Table Context Menu
473
+
474
+ Right-click on any table cell to access:
475
+
476
+ - **Insert Row Above / Below**
477
+ - **Insert Column Left / Right**
478
+ - **Delete Row / Column / Table**
479
+ - **Merge Cells** — merge selected cells horizontally
480
+ - **Split Cell** — split a previously merged cell
481
+
482
+ ### Column Resize
483
+
484
+ Hover near any column border to reveal a **drag handle**. Drag to resize adjacent column widths. The table uses fixed layout during resize for precise control.
485
+
486
+ ---
487
+
488
+ ## 🖼️ Image Support
489
+
490
+ ### Insert via URL
491
+
492
+ Click the **Image** toolbar button and paste a URL.
493
+
494
+ ### Upload from File
495
+
496
+ The Image dialog includes a file upload input. Selected images are converted to **base64** and embedded directly in the content.
497
+
498
+ ### Drag & Drop
499
+
500
+ Drag image files directly into the editor content area. Images are automatically converted to base64 and inserted at the drop position.
501
+
502
+ ### Resize Images
503
+
504
+ Click any image in the editor to select it — **resize handles** appear on all four corners. Drag any handle to resize while maintaining aspect ratio. A live **size label** (width × height) is displayed below the image during resizing.
505
+
506
+ ---
507
+
508
+ ## 🔍 Find & Replace
509
+
510
+ Open with the toolbar button or implement via the modal API.
511
+
512
+ Features:
513
+ - **Case-sensitive** search toggle
514
+ - **Regular expression** support
515
+ - **Find Next** — navigate through matches with highlighting
516
+ - **Replace** — replace current match
517
+ - **Replace All** — replace all matches at once
518
+
519
+ ---
520
+
521
+ ## ✏️ Floating Toolbar
522
+
523
+ When you select text in the editor, a floating toolbar appears above the selection with quick access to:
524
+
525
+ - **Move Block Up / Down** — reorder the current content block (left side)
526
+ - **Bold, Italic, Underline, Strikethrough** — quick formatting
527
+ - **Insert Link**
528
+
529
+ The toolbar follows the selection and disappears when the selection is cleared.
530
+
531
+ ---
532
+
533
+ ## 🔀 Block Drag & Drop
534
+
535
+ Hover over any content block (paragraph, heading, table, image, list, etc.) to reveal a **grip handle** (⠿) on the left side. Drag to reorder blocks within the editor. A ghost preview and drop placeholder guide the drop position.
536
+
537
+ ---
538
+
539
+ ## 🖨️ Print
540
+
541
+ Click the **Print** button to open the browser print dialog with the editor content formatted for printing.
542
+
543
+ ---
544
+
545
+ ## ⌨️ Keyboard Shortcuts
546
+
547
+ | Shortcut | Action |
548
+ |----------|--------|
549
+ | **Ctrl+B** | Bold |
550
+ | **Ctrl+I** | Italic |
551
+ | **Ctrl+U** | Underline |
552
+ | **Ctrl+K** | Insert Link |
553
+ | **Ctrl+S** | Save (triggers `onSave` callback) |
554
+ | **Ctrl+Z** | Undo |
555
+ | **Ctrl+Y** / **Ctrl+Shift+Z** | Redo |
556
+ | **Tab** | Indent |
557
+ | **Shift+Tab** | Outdent |
558
+
559
+ ---
560
+
561
+ ## 📐 Status Bar
562
+
563
+ The editor includes a status bar at the bottom displaying:
564
+
565
+ - **Left side:** Word count and character count
566
+ - **Right side:** Autosave status (when enabled) and current block type (p, h1, h2, etc.)
567
+
568
+ ---
569
+
570
+ ## 🔗 Integration Examples
571
+
572
+ ### PHP Helper (Recommended)
573
+
574
+ Neiki's Editor includes a PHP integration helper (`php/neiki-editor.php`) that provides asset loading, editor rendering, and HTML sanitization:
575
+
576
+ ```php
577
+ <?php require_once 'php/neiki-editor.php'; ?>
578
+ <!DOCTYPE html>
579
+ <html>
580
+ <head>
581
+ <?= NeikiEditor::assets() ?>
582
+ </head>
583
+ <body>
584
+ <form method="POST" action="save.php">
585
+ <?= NeikiEditor::render('content', $article->content, [
586
+ 'minHeight' => 400,
587
+ 'placeholder' => 'Write your article...'
588
+ ]) ?>
589
+ <button type="submit">Save</button>
590
+ </form>
591
+ </body>
592
+ </html>
593
+ ```
594
+
595
+ ```php
596
+ // save.php — sanitize before saving to database
597
+ require_once 'php/neiki-editor.php';
598
+ $clean = NeikiEditor::sanitize($_POST['content']);
599
+ $db->save($clean);
600
+ ```
601
+
602
+ #### PHP Helper Methods
603
+
604
+ | Method | Description |
605
+ |--------|-------------|
606
+ | `NeikiEditor::assets()` | Output CSS & JS tags (CDN). Call once per page. |
607
+ | `NeikiEditor::assets(true, '/path/to/dist')` | Use local files instead of CDN. |
608
+ | `NeikiEditor::render($id, $content, $options)` | Render textarea + init script. |
609
+ | `NeikiEditor::sanitize($html)` | Strip dangerous tags/attributes before DB save. |
610
+
611
+ ### PHP Form (Manual)
612
+
613
+ ```php
614
+ <form method="POST" action="save.php">
615
+ <textarea id="editor" name="content"><?= htmlspecialchars($article->content) ?></textarea>
616
+ <button type="submit">Save</button>
617
+ </form>
618
+
619
+ <script>
620
+ const editor = new NeikiEditor('#editor');
621
+ </script>
622
+ ```
623
+
624
+ ### AJAX Save
625
+
626
+ ```javascript
627
+ const editor = new NeikiEditor('#editor', {
628
+ onChange: debounce(function(content) {
629
+ fetch('/api/save', {
630
+ method: 'POST',
631
+ headers: { 'Content-Type': 'application/json' },
632
+ body: JSON.stringify({ content })
633
+ });
634
+ }, 2000)
635
+ });
636
+ ```
637
+
638
+ ### Vue.js
639
+
640
+ ```vue
641
+ <template>
642
+ <textarea ref="editor"></textarea>
643
+ </template>
644
+
645
+ <script>
646
+ export default {
647
+ mounted() {
648
+ this.editor = new NeikiEditor(this.$refs.editor, {
649
+ onChange: (content) => {
650
+ this.$emit('update:modelValue', content);
651
+ }
652
+ });
653
+ },
654
+ beforeUnmount() {
655
+ this.editor.destroy();
656
+ }
657
+ }
658
+ </script>
659
+ ```
660
+
661
+ ### React
662
+
663
+ ```jsx
664
+ import { useEffect, useRef } from 'react';
665
+
666
+ function NeikiEditorComponent({ value, onChange }) {
667
+ const ref = useRef(null);
668
+ const editorRef = useRef(null);
669
+
670
+ useEffect(() => {
671
+ editorRef.current = new NeikiEditor(ref.current, {
672
+ onChange: (content) => onChange?.(content)
673
+ });
674
+ return () => editorRef.current?.destroy();
675
+ }, []);
676
+
677
+ return <textarea ref={ref} defaultValue={value} />;
678
+ }
679
+ ```
680
+
681
+ ---
682
+
683
+ ## 🌐 Browser Support
684
+
685
+ | Browser | Support |
686
+ |---------|---------|
687
+ | Chrome | ✅ Latest |
688
+ | Firefox | ✅ Latest |
689
+ | Safari | ✅ Latest |
690
+ | Edge | ✅ Latest |
691
+ | Opera | ✅ Latest |
692
+
693
+ ---
694
+
695
+ ## 📁 File Structure
696
+
697
+ ```
698
+ neiki-editor/
699
+ ├── dist/
700
+ │ ├── neiki-editor.min.js # Minified editor + embedded CSS (recommended)
701
+ │ ├── neiki-editor.min.css # Minified styles
702
+ │ ├── neiki-editor.js # Editor core (unminified)
703
+ │ └── neiki-editor.css # Editor styles (unminified)
704
+ ├── demo/
705
+ │ └── index.html # Interactive demo page
706
+ │ └── logo.png # Demo logo
707
+ ├── php/
708
+ │ └── neiki-editor.php # PHP integration helper
709
+ ├── logo.png
710
+ ├── package.json
711
+ ├── README.md
712
+ ├── LICENSE
713
+ ├── CHANGELOG.md
714
+ ├── CONTRIBUTING.md
715
+ ├── CODE_OF_CONDUCT.md
716
+ └── SECURITY.md
717
+ ```
718
+
719
+ ---
720
+
721
+ ## 📄 License
722
+
723
+ This project is licensed under the MIT License — see the [LICENSE](LICENSE) file for details.
724
+
725
+ ---
726
+
727
+ <p align="center">
728
+ Made with ❤️ for the web community
729
+ </p>