neiki-editor 3.1.0 → 3.3.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.
- package/LICENSE +661 -661
- package/README.md +666 -668
- package/dist/neiki-editor.css +2855 -2748
- package/dist/neiki-editor.js +7685 -7315
- package/dist/neiki-editor.min.css +1 -1
- package/dist/neiki-editor.min.js +1 -1
- package/package.json +36 -36
package/README.md
CHANGED
|
@@ -1,668 +1,666 @@
|
|
|
1
|
-
<p align="center">
|
|
2
|
-
<img src="assets/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
|
-
<
|
|
13
|
-
<
|
|
14
|
-
<img src="https://img.shields.io/badge/
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
<
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
<img src="https://img.shields.io/badge/
|
|
25
|
-
<img src="https://img.shields.io/badge/
|
|
26
|
-
<img src="https://img.shields.io/badge/
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
<a href="https://
|
|
32
|
-
</p>
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
---
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
- **
|
|
70
|
-
- **
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
-
|
|
95
|
-
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
- **
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
- **
|
|
104
|
-
-
|
|
105
|
-
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
-
|
|
113
|
-
-
|
|
114
|
-
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
<
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
<
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
<
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
```
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
const
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
|
247
|
-
|
|
248
|
-
| `
|
|
249
|
-
| `
|
|
250
|
-
| `
|
|
251
|
-
| `
|
|
252
|
-
| `
|
|
253
|
-
| `
|
|
254
|
-
| `
|
|
255
|
-
| `
|
|
256
|
-
| `
|
|
257
|
-
| `
|
|
258
|
-
| `
|
|
259
|
-
| `
|
|
260
|
-
| `
|
|
261
|
-
| `
|
|
262
|
-
| `
|
|
263
|
-
| `
|
|
264
|
-
| `
|
|
265
|
-
| `
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
'
|
|
279
|
-
'
|
|
280
|
-
'
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
```
|
|
307
|
-
|
|
308
|
-
```
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
```
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
//
|
|
356
|
-
editor.
|
|
357
|
-
editor.
|
|
358
|
-
editor.
|
|
359
|
-
editor.
|
|
360
|
-
editor.
|
|
361
|
-
editor.
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
editor.
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
editor.
|
|
372
|
-
editor.
|
|
373
|
-
editor.
|
|
374
|
-
editor.
|
|
375
|
-
editor.
|
|
376
|
-
editor.
|
|
377
|
-
editor.
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
//
|
|
390
|
-
NeikiEditor.
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
|
423
|
-
|
|
424
|
-
| `
|
|
425
|
-
| `
|
|
426
|
-
| `
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
|
435
|
-
|
|
436
|
-
| Ctrl+
|
|
437
|
-
| Ctrl+
|
|
438
|
-
| Ctrl+
|
|
439
|
-
| Ctrl+
|
|
440
|
-
| Ctrl+
|
|
441
|
-
|
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
```
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
|
477
|
-
|
|
478
|
-
| `NeikiEditor::
|
|
479
|
-
| `NeikiEditor::
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
<
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
const
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
- [
|
|
583
|
-
- [
|
|
584
|
-
- [
|
|
585
|
-
- [
|
|
586
|
-
- [
|
|
587
|
-
- [
|
|
588
|
-
- [
|
|
589
|
-
- [
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
|
602
|
-
|
|
603
|
-
|
|
|
604
|
-
|
|
|
605
|
-
|
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
├── .
|
|
618
|
-
│
|
|
619
|
-
│
|
|
620
|
-
|
|
621
|
-
│
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
│
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
│
|
|
628
|
-
├──
|
|
629
|
-
│ ├── neiki-editor.css
|
|
630
|
-
│
|
|
631
|
-
|
|
632
|
-
│ └── neiki-editor.
|
|
633
|
-
├──
|
|
634
|
-
│
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
├── .
|
|
639
|
-
├── .
|
|
640
|
-
├──
|
|
641
|
-
├──
|
|
642
|
-
├──
|
|
643
|
-
├──
|
|
644
|
-
├──
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
Made with ❤️ for the web community
|
|
668
|
-
</p>
|
|
1
|
+
<p align="center">
|
|
2
|
+
<img src="assets/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
|
+
<img src="https://img.shields.io/badge/web%20components-29ABE2.svg?style=for-the-badge&logo=webcomponentsdotorg&logoColor=white" alt="Web Components">
|
|
13
|
+
<br>
|
|
14
|
+
<img src="https://img.shields.io/badge/License-AGPL--3.0-2563EB?style=for-the-badge&logo=open-source-initiative&logoColor=white&labelColor=000F15&logoWidth=20" alt="License">
|
|
15
|
+
<img src="https://img.shields.io/badge/Version-3.3.0-2563EB?style=for-the-badge&logo=semantic-release&logoColor=white&labelColor=000F15&logoWidth=20" alt="Version">
|
|
16
|
+
</p>
|
|
17
|
+
|
|
18
|
+
<p align="center">
|
|
19
|
+
<b>Lightweight WYSIWYG Rich Text Editor</b><br>
|
|
20
|
+
<i>Easy to integrate, fully customizable, zero dependencies.</i>
|
|
21
|
+
</p>
|
|
22
|
+
|
|
23
|
+
<p align="center">
|
|
24
|
+
<img src="https://img.shields.io/badge/Features-30%2B%20Tools-3b82f6?style=flat&labelColor=383C43" />
|
|
25
|
+
<img src="https://img.shields.io/badge/Themes-Light%20%26%20Dark%20%26%20More-8b5cf6?style=flat&labelColor=383C43" />
|
|
26
|
+
<img src="https://img.shields.io/badge/Setup-Zero%20Config-22c55e?style=flat&labelColor=383C43" />
|
|
27
|
+
<img src="https://img.shields.io/badge/Size-Lightweight-f97316?style=flat&labelColor=383C43" />
|
|
28
|
+
</p>
|
|
29
|
+
|
|
30
|
+
<p align="center">
|
|
31
|
+
<a href="https://sourceforge.net/projects/neiki-editor/files/latest/download"><img alt="Download Neiki's Editor" src="https://a.fsdn.com/con/app/sf-download-button" width=276 height=48 srcset="https://a.fsdn.com/con/app/sf-download-button?button_size=2x 2x"></a>
|
|
32
|
+
</p>
|
|
33
|
+
|
|
34
|
+
---
|
|
35
|
+
<p align="center">
|
|
36
|
+
<img src="assets/preview.png" alt="Neiki's Editor" width="900">
|
|
37
|
+
</p>
|
|
38
|
+
|
|
39
|
+
---
|
|
40
|
+
|
|
41
|
+
**Live version:** [https://neikiri.dev/editor](https://neikiri.dev/editor) · **Documentation:** [Wiki](https://github.com/neikiri/neiki-editor/wiki)
|
|
42
|
+
|
|
43
|
+
---
|
|
44
|
+
|
|
45
|
+
## Overview
|
|
46
|
+
|
|
47
|
+
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.
|
|
48
|
+
|
|
49
|
+
```html
|
|
50
|
+
<textarea id="editor"></textarea>
|
|
51
|
+
<script src="https://cdn.neikiri.dev/neiki-editor/neiki-editor.min.js"></script>
|
|
52
|
+
<script>
|
|
53
|
+
const editor = new NeikiEditor('#editor');
|
|
54
|
+
</script>
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
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.
|
|
58
|
+
|
|
59
|
+
---
|
|
60
|
+
|
|
61
|
+
## Why Neiki's Editor?
|
|
62
|
+
|
|
63
|
+
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.
|
|
64
|
+
|
|
65
|
+
- **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.
|
|
66
|
+
- **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.
|
|
67
|
+
- **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.
|
|
68
|
+
- **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](#security-notes)).
|
|
69
|
+
- **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.
|
|
70
|
+
- **Localized out of the box.** Eight UI languages are bundled, and you can override or add translations with your own keys.
|
|
71
|
+
|
|
72
|
+
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.
|
|
73
|
+
|
|
74
|
+
---
|
|
75
|
+
|
|
76
|
+
## Features
|
|
77
|
+
|
|
78
|
+
### Text formatting
|
|
79
|
+
|
|
80
|
+
- Bold, italic, underline, strikethrough, subscript, superscript
|
|
81
|
+
- Inline `<code>` and `<pre><code>` code blocks
|
|
82
|
+
- Remove formatting
|
|
83
|
+
- Headings (Paragraph, H1–H6), font family, and a font-size widget with `−` / `+` controls and presets
|
|
84
|
+
- Text color and background color pickers (preset palette, native color input, hex input)
|
|
85
|
+
|
|
86
|
+
> When no text is selected, formatting commands automatically apply to the word at the cursor.
|
|
87
|
+
|
|
88
|
+
### Structure and content blocks
|
|
89
|
+
|
|
90
|
+
- Bulleted and numbered lists, indent / outdent
|
|
91
|
+
- Left, center, right, and justify alignment
|
|
92
|
+
- Blockquotes and horizontal rules
|
|
93
|
+
- **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
|
|
94
|
+
- **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
|
|
95
|
+
- **Video** — insert by URL, file upload, or drag & drop; rendered as `<video controls>` and resizable like images
|
|
96
|
+
|
|
97
|
+
### Editing experience
|
|
98
|
+
|
|
99
|
+
- **Right-click context menu** — Undo, Redo, Cut, Copy, Paste, **Paste as Plain Text**, Select All, and Remove Formatting, themed to match the active editor theme; disable it entirely with `contextMenu: false`
|
|
100
|
+
- **Floating toolbar** that appears on text selection (move block up/down, bold, italic, underline, strikethrough, insert link)
|
|
101
|
+
- **Block drag & drop** reordering using a grip handle, with ghost preview and drop placeholder
|
|
102
|
+
- **Find & Replace** with case-sensitive and regular-expression modes
|
|
103
|
+
- **HTML source view** with syntax highlighting
|
|
104
|
+
- Undo / redo, autosave to `localStorage`, fullscreen mode, content preview, download as HTML, and print
|
|
105
|
+
- Status bar showing word count, character count, and the current block type
|
|
106
|
+
|
|
107
|
+
### Developer features
|
|
108
|
+
|
|
109
|
+
- Zero dependencies, single-file drop-in
|
|
110
|
+
- Plugin API for custom toolbar buttons and init hooks
|
|
111
|
+
- PHP integration helper with asset loading, rendering, and HTML sanitization
|
|
112
|
+
- Eight built-in UI languages: `en`, `cs`, `zh`, `es`, `de`, `fr`, `pt`, `ja`
|
|
113
|
+
- Seven built-in themes: Light, Dark, Blue, Dark Blue, Midnight, Void, Autumn
|
|
114
|
+
- Lifecycle callbacks: `onReady`, `onChange`, `onSave`, `onFocus`, `onBlur`
|
|
115
|
+
|
|
116
|
+
---
|
|
117
|
+
|
|
118
|
+
## Getting started
|
|
119
|
+
|
|
120
|
+
The recommended install is the single bundled script from the CDN. CSS is included automatically.
|
|
121
|
+
|
|
122
|
+
```html
|
|
123
|
+
<script src="https://cdn.neikiri.dev/neiki-editor/neiki-editor.min.js"></script>
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
<details>
|
|
127
|
+
<summary><b>Other installation options</b> (pinned version, separate CSS/JS, jsDelivr, npm, self-hosted)</summary>
|
|
128
|
+
<br>
|
|
129
|
+
|
|
130
|
+
**Pin a specific version**
|
|
131
|
+
|
|
132
|
+
```html
|
|
133
|
+
<script src="https://cdn.neikiri.dev/neiki-editor/3.3.0/neiki-editor.min.js"></script>
|
|
134
|
+
```
|
|
135
|
+
|
|
136
|
+
**Load CSS and JS separately**
|
|
137
|
+
|
|
138
|
+
```html
|
|
139
|
+
<!-- Latest -->
|
|
140
|
+
<link rel="stylesheet" href="https://cdn.neikiri.dev/neiki-editor/neiki-editor.css">
|
|
141
|
+
<script src="https://cdn.neikiri.dev/neiki-editor/neiki-editor.js"></script>
|
|
142
|
+
|
|
143
|
+
<!-- Or pinned -->
|
|
144
|
+
<link rel="stylesheet" href="https://cdn.neikiri.dev/neiki-editor/3.3.0/neiki-editor.css">
|
|
145
|
+
<script src="https://cdn.neikiri.dev/neiki-editor/3.3.0/neiki-editor.js"></script>
|
|
146
|
+
```
|
|
147
|
+
|
|
148
|
+
**Alternative CDN — jsDelivr**
|
|
149
|
+
|
|
150
|
+
```html
|
|
151
|
+
<script src="https://cdn.jsdelivr.net/gh/neikiri/neiki-editor@latest/dist/neiki-editor.min.js"></script>
|
|
152
|
+
<!-- Pinned -->
|
|
153
|
+
<script src="https://cdn.jsdelivr.net/gh/neikiri/neiki-editor@3.3.0/dist/neiki-editor.min.js"></script>
|
|
154
|
+
```
|
|
155
|
+
|
|
156
|
+
**Package manager**
|
|
157
|
+
|
|
158
|
+
```bash
|
|
159
|
+
npm install neiki-editor
|
|
160
|
+
# or
|
|
161
|
+
yarn add neiki-editor
|
|
162
|
+
# or
|
|
163
|
+
pnpm add neiki-editor
|
|
164
|
+
```
|
|
165
|
+
|
|
166
|
+
**Self-hosted**
|
|
167
|
+
|
|
168
|
+
```html
|
|
169
|
+
<script src="path/to/neiki-editor.min.js"></script>
|
|
170
|
+
|
|
171
|
+
<!-- Or separate files -->
|
|
172
|
+
<link rel="stylesheet" href="path/to/neiki-editor.css">
|
|
173
|
+
<script src="path/to/neiki-editor.js"></script>
|
|
174
|
+
```
|
|
175
|
+
|
|
176
|
+
</details>
|
|
177
|
+
|
|
178
|
+
> **Note:** When using separate CSS and JS files, load the CSS **before** the JS so the editor renders correctly during initialization.
|
|
179
|
+
|
|
180
|
+
---
|
|
181
|
+
|
|
182
|
+
## Basic usage
|
|
183
|
+
|
|
184
|
+
Attach the editor to a `<textarea>`. Any HTML already inside the element is loaded automatically.
|
|
185
|
+
|
|
186
|
+
```html
|
|
187
|
+
<textarea id="editor"><p>Hello, world!</p></textarea>
|
|
188
|
+
|
|
189
|
+
<script>
|
|
190
|
+
const editor = new NeikiEditor('#editor');
|
|
191
|
+
</script>
|
|
192
|
+
```
|
|
193
|
+
|
|
194
|
+
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:
|
|
195
|
+
|
|
196
|
+
```javascript
|
|
197
|
+
const editor1 = new NeikiEditor('#editor-1', { theme: 'light' });
|
|
198
|
+
const editor2 = new NeikiEditor('#editor-2', { theme: 'dark', minHeight: 200 });
|
|
199
|
+
```
|
|
200
|
+
|
|
201
|
+
### Getting content back
|
|
202
|
+
|
|
203
|
+
```javascript
|
|
204
|
+
const html = editor.getContent(); // HTML string
|
|
205
|
+
const text = editor.getText(); // plain text, tags stripped
|
|
206
|
+
const empty = editor.isEmpty(); // boolean
|
|
207
|
+
const json = editor.getJSON(); // structured JSON
|
|
208
|
+
```
|
|
209
|
+
|
|
210
|
+
### Saving on form submit
|
|
211
|
+
|
|
212
|
+
```javascript
|
|
213
|
+
const editor = new NeikiEditor('#editor');
|
|
214
|
+
|
|
215
|
+
document.getElementById('my-form').addEventListener('submit', function (e) {
|
|
216
|
+
e.preventDefault();
|
|
217
|
+
const content = editor.getContent();
|
|
218
|
+
// send `content` to your backend...
|
|
219
|
+
});
|
|
220
|
+
```
|
|
221
|
+
|
|
222
|
+
---
|
|
223
|
+
|
|
224
|
+
## Configuration
|
|
225
|
+
|
|
226
|
+
All options are optional. Pass them as the second argument to the constructor.
|
|
227
|
+
|
|
228
|
+
```javascript
|
|
229
|
+
const editor = new NeikiEditor('#editor', {
|
|
230
|
+
placeholder: 'Start typing...',
|
|
231
|
+
minHeight: 300,
|
|
232
|
+
maxHeight: 600,
|
|
233
|
+
theme: 'light', // 'light' | 'dark' | 'blue' | 'dark-blue' | 'midnight' | 'void' | 'autumn'
|
|
234
|
+
language: 'en', // 'en' | 'cs' | 'zh' | 'es' | 'de' | 'fr' | 'pt' | 'ja'
|
|
235
|
+
onChange: function (content, editor) {
|
|
236
|
+
console.log('Content changed:', content);
|
|
237
|
+
}
|
|
238
|
+
});
|
|
239
|
+
```
|
|
240
|
+
|
|
241
|
+
### Options
|
|
242
|
+
|
|
243
|
+
| Option | Type | Default | Description |
|
|
244
|
+
|--------|------|---------|-------------|
|
|
245
|
+
| `placeholder` | `string` | `'Start typing...'` | Ghost text shown when the editor is empty |
|
|
246
|
+
| `minHeight` | `number` | `300` | Minimum height in pixels |
|
|
247
|
+
| `maxHeight` | `number \| null` | `null` | Maximum height in pixels (enables scroll). When `null`, the toolbar uses `position: sticky` while scrolling |
|
|
248
|
+
| `autofocus` | `boolean` | `false` | Focus the editor on initialization |
|
|
249
|
+
| `spellcheck` | `boolean` | `true` | Enable browser spellcheck |
|
|
250
|
+
| `readonly` | `boolean` | `false` | Make the editor read-only |
|
|
251
|
+
| `theme` | `string` | `'light'` | `'light'`, `'dark'`, `'blue'`, `'dark-blue'`, `'midnight'`, `'void'`, or `'autumn'` |
|
|
252
|
+
| `language` | `string` | `'en'` | UI language (see list above) |
|
|
253
|
+
| `translations` | `object \| null` | `null` | Custom translation keys, merged with built-ins |
|
|
254
|
+
| `contextMenu` | `boolean` | `true` | Enable the custom right-click context menu. Set to `false` to fall back to the browser's native menu |
|
|
255
|
+
| `autosaveKey` | `string \| null` | `null` | Custom `localStorage` scope for autosave |
|
|
256
|
+
| `customClass` | `string \| null` | `null` | Extra CSS class appended to the content area (`neiki-content`) |
|
|
257
|
+
| `toolbar` | `array` | *(full set)* | Toolbar button configuration |
|
|
258
|
+
| `showHelp` | `boolean` | `true` | Show the Help item in the More menu (⋯) |
|
|
259
|
+
| `imageUploadHandler` | `function \| null` | `null` | Async `(file) => Promise<url>` for server/CDN image uploads instead of base64 |
|
|
260
|
+
| `videoUploadHandler` | `function \| null` | `null` | Async `(file) => Promise<url>` for server/CDN video uploads instead of base64 |
|
|
261
|
+
| `onChange` | `function \| null` | `null` | Fired on every content change |
|
|
262
|
+
| `onSave` | `function \| null` | `null` | Fired on save (Ctrl+S or More → Save) |
|
|
263
|
+
| `onFocus` | `function \| null` | `null` | Fired when the editor gains focus |
|
|
264
|
+
| `onBlur` | `function \| null` | `null` | Fired when the editor loses focus |
|
|
265
|
+
| `onReady` | `function \| null` | `null` | Fired once the editor is fully initialized |
|
|
266
|
+
|
|
267
|
+
> The `language` option is read at initialization. Changing the UI language at runtime requires re-initializing the editor.
|
|
268
|
+
|
|
269
|
+
### Customizing the toolbar
|
|
270
|
+
|
|
271
|
+
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.
|
|
272
|
+
|
|
273
|
+
```javascript
|
|
274
|
+
new NeikiEditor('#editor', {
|
|
275
|
+
toolbar: [
|
|
276
|
+
'bold', 'italic', 'underline', '|',
|
|
277
|
+
'heading', 'fontSize', '|',
|
|
278
|
+
'bulletList', 'numberedList', '|',
|
|
279
|
+
'insertDropdown', '|',
|
|
280
|
+
'moreMenu'
|
|
281
|
+
]
|
|
282
|
+
});
|
|
283
|
+
```
|
|
284
|
+
|
|
285
|
+
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](https://github.com/neikiri/neiki-editor/wiki/Toolbar-Reference) for the full list.
|
|
286
|
+
|
|
287
|
+
### Themes
|
|
288
|
+
|
|
289
|
+
Seven themes ship by default: `light`, `dark`, `blue`, `dark-blue`, `midnight`, `void` (a dark purple cyberpunk theme with neon-purple glow accents), and `autumn` (a warm retro theme with a brown background and orange accents). Set one at init or change it at runtime:
|
|
290
|
+
|
|
291
|
+
```javascript
|
|
292
|
+
const editor = new NeikiEditor('#editor', { theme: 'dark' });
|
|
293
|
+
|
|
294
|
+
editor.setTheme('void'); // set a specific theme
|
|
295
|
+
editor.toggleTheme(); // cycle: light → dark → blue → dark-blue → midnight → void → autumn → light
|
|
296
|
+
```
|
|
297
|
+
|
|
298
|
+
> 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.
|
|
299
|
+
|
|
300
|
+
### Custom content styling
|
|
301
|
+
|
|
302
|
+
Use `customClass` to add your own class to the content area without overriding the defaults:
|
|
303
|
+
|
|
304
|
+
```javascript
|
|
305
|
+
new NeikiEditor('#editor', { customClass: 'article-content' });
|
|
306
|
+
```
|
|
307
|
+
|
|
308
|
+
```css
|
|
309
|
+
.article-content {
|
|
310
|
+
font-family: Georgia, serif;
|
|
311
|
+
font-size: 18px;
|
|
312
|
+
line-height: 1.8;
|
|
313
|
+
}
|
|
314
|
+
```
|
|
315
|
+
|
|
316
|
+
### Localization
|
|
317
|
+
|
|
318
|
+
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:
|
|
319
|
+
|
|
320
|
+
```javascript
|
|
321
|
+
// Inline overrides (merged with built-ins)
|
|
322
|
+
new NeikiEditor('#editor', {
|
|
323
|
+
language: 'en',
|
|
324
|
+
translations: {
|
|
325
|
+
'toolbar.bold': 'Make it bold',
|
|
326
|
+
'placeholder': 'Start your story...'
|
|
327
|
+
}
|
|
328
|
+
});
|
|
329
|
+
|
|
330
|
+
// Or register globally
|
|
331
|
+
NeikiEditor.addTranslation('de', {
|
|
332
|
+
'toolbar.bold': 'Fett (Strg+B)'
|
|
333
|
+
});
|
|
334
|
+
```
|
|
335
|
+
|
|
336
|
+
### Autosave
|
|
337
|
+
|
|
338
|
+
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:
|
|
339
|
+
|
|
340
|
+
```javascript
|
|
341
|
+
new NeikiEditor('#editor', { autosaveKey: 'article-42' });
|
|
342
|
+
```
|
|
343
|
+
|
|
344
|
+
> Autosave is intended for drafts and recovery. For production persistence, use the `onSave` or `onChange` callbacks to save to your backend.
|
|
345
|
+
|
|
346
|
+
---
|
|
347
|
+
|
|
348
|
+
## API
|
|
349
|
+
|
|
350
|
+
Methods are called on the editor instance unless noted as static.
|
|
351
|
+
|
|
352
|
+
```javascript
|
|
353
|
+
// Content
|
|
354
|
+
editor.getContent(); // HTML string (alias: getHTML)
|
|
355
|
+
editor.setContent('<p>Hello</p>'); // (alias: setHTML)
|
|
356
|
+
editor.getText(); // plain text
|
|
357
|
+
editor.isEmpty(); // boolean
|
|
358
|
+
editor.getJSON(); // structured JSON
|
|
359
|
+
editor.setJSON(json);
|
|
360
|
+
editor.insertHTML('<mark>hi</mark>');// insert at cursor
|
|
361
|
+
editor.clearAll();
|
|
362
|
+
|
|
363
|
+
// Selection
|
|
364
|
+
editor.getSelection();
|
|
365
|
+
editor.wrapSelection('mark', { class: 'highlight' });
|
|
366
|
+
editor.unwrapSelection('mark');
|
|
367
|
+
|
|
368
|
+
// Control
|
|
369
|
+
editor.focus();
|
|
370
|
+
editor.blur();
|
|
371
|
+
editor.enable();
|
|
372
|
+
editor.disable();
|
|
373
|
+
editor.destroy(); // remove editor, restore original element
|
|
374
|
+
editor.toggleFullscreen();
|
|
375
|
+
editor.triggerSave(); // trigger onSave
|
|
376
|
+
editor.previewContent(); // open preview modal
|
|
377
|
+
editor.downloadContent(); // download as .html
|
|
378
|
+
|
|
379
|
+
// Theme
|
|
380
|
+
editor.setTheme('dark');
|
|
381
|
+
editor.toggleTheme();
|
|
382
|
+
|
|
383
|
+
// Commands
|
|
384
|
+
editor.execCommand('bold');
|
|
385
|
+
editor.execCommand('foreColor', '#ff0000');
|
|
386
|
+
|
|
387
|
+
// Static (plugins)
|
|
388
|
+
NeikiEditor.registerPlugin({ /* ... */ });
|
|
389
|
+
NeikiEditor.getPlugins(); // array of registered plugins
|
|
390
|
+
NeikiEditor.addTranslation('de', { /* ... */ });
|
|
391
|
+
```
|
|
392
|
+
|
|
393
|
+
> In SPA frameworks, always call `editor.destroy()` when the component unmounts to clean up listeners and avoid memory leaks.
|
|
394
|
+
|
|
395
|
+
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](https://github.com/neikiri/neiki-editor/wiki/API-Reference).
|
|
396
|
+
|
|
397
|
+
### Plugin API
|
|
398
|
+
|
|
399
|
+
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.
|
|
400
|
+
|
|
401
|
+
```javascript
|
|
402
|
+
NeikiEditor.registerPlugin({
|
|
403
|
+
name: 'word-counter', // required, unique
|
|
404
|
+
icon: '<svg viewBox="0 0 24 24">...</svg>', // optional toolbar icon
|
|
405
|
+
tooltip: 'Show Word Count', // optional
|
|
406
|
+
action: function (editor) { // optional, on click
|
|
407
|
+
const words = editor.getText().trim().split(/\s+/).filter(Boolean).length;
|
|
408
|
+
alert('Word count: ' + words);
|
|
409
|
+
},
|
|
410
|
+
init: function (editor) { // optional, runs once
|
|
411
|
+
console.log('Plugin initialized!');
|
|
412
|
+
}
|
|
413
|
+
});
|
|
414
|
+
|
|
415
|
+
new NeikiEditor('#editor', {
|
|
416
|
+
toolbar: ['bold', 'italic', '|', 'word-counter', '|', 'moreMenu']
|
|
417
|
+
});
|
|
418
|
+
```
|
|
419
|
+
|
|
420
|
+
| Property | Type | Required | Description |
|
|
421
|
+
|----------|------|----------|-------------|
|
|
422
|
+
| `name` | `string` | Yes | Unique identifier, referenced in the toolbar array |
|
|
423
|
+
| `icon` | `string` | No | SVG markup for the toolbar button |
|
|
424
|
+
| `tooltip` | `string` | No | Hover tooltip text |
|
|
425
|
+
| `action` | `function(editor)` | No | Called when the button is clicked |
|
|
426
|
+
| `init` | `function(editor)` | No | Called once when the editor initializes |
|
|
427
|
+
|
|
428
|
+
---
|
|
429
|
+
|
|
430
|
+
## Keyboard shortcuts
|
|
431
|
+
|
|
432
|
+
| Shortcut | Action |
|
|
433
|
+
|----------|--------|
|
|
434
|
+
| Ctrl+B | Bold |
|
|
435
|
+
| Ctrl+I | Italic |
|
|
436
|
+
| Ctrl+U | Underline |
|
|
437
|
+
| Ctrl+K | Insert link |
|
|
438
|
+
| Ctrl+S | Save (triggers `onSave`) |
|
|
439
|
+
| Ctrl+Z | Undo |
|
|
440
|
+
| Ctrl+Y / Ctrl+Shift+Z | Redo |
|
|
441
|
+
| Tab / Shift+Tab | Indent / Outdent |
|
|
442
|
+
|
|
443
|
+
---
|
|
444
|
+
|
|
445
|
+
## Integration notes
|
|
446
|
+
|
|
447
|
+
### PHP helper (recommended for PHP apps)
|
|
448
|
+
|
|
449
|
+
The repository includes `php/neiki-editor.php`, a helper for asset loading, rendering, and sanitization.
|
|
450
|
+
|
|
451
|
+
```php
|
|
452
|
+
<?php require_once 'php/neiki-editor.php'; ?>
|
|
453
|
+
<head>
|
|
454
|
+
<?= NeikiEditor::assets() ?>
|
|
455
|
+
</head>
|
|
456
|
+
<body>
|
|
457
|
+
<form method="POST" action="save.php">
|
|
458
|
+
<?= NeikiEditor::render('content', $article->body, [
|
|
459
|
+
'minHeight' => 400,
|
|
460
|
+
'placeholder' => 'Write your article...'
|
|
461
|
+
]) ?>
|
|
462
|
+
<button type="submit">Save</button>
|
|
463
|
+
</form>
|
|
464
|
+
</body>
|
|
465
|
+
```
|
|
466
|
+
|
|
467
|
+
```php
|
|
468
|
+
// save.php — sanitize before saving to the database
|
|
469
|
+
require_once 'php/neiki-editor.php';
|
|
470
|
+
$clean = NeikiEditor::sanitize($_POST['content']);
|
|
471
|
+
$db->save($clean);
|
|
472
|
+
```
|
|
473
|
+
|
|
474
|
+
| Method | Description |
|
|
475
|
+
|--------|-------------|
|
|
476
|
+
| `NeikiEditor::assets()` | Output CDN CSS & JS tags. Call once per page. |
|
|
477
|
+
| `NeikiEditor::assets(true, '/path/to/dist')` | Use local files instead of the CDN. |
|
|
478
|
+
| `NeikiEditor::render($id, $content, $options)` | Render the textarea plus initialization script. |
|
|
479
|
+
| `NeikiEditor::sanitize($html)` | Strip dangerous tags/attributes before saving. |
|
|
480
|
+
|
|
481
|
+
### PHP form (manual)
|
|
482
|
+
|
|
483
|
+
If you prefer not to use the helper, render a plain `<textarea>` and initialize the editor yourself:
|
|
484
|
+
|
|
485
|
+
```php
|
|
486
|
+
<form method="POST" action="save.php">
|
|
487
|
+
<textarea id="editor" name="content"><?= htmlspecialchars($article->content) ?></textarea>
|
|
488
|
+
<button type="submit">Save</button>
|
|
489
|
+
</form>
|
|
490
|
+
|
|
491
|
+
<script>
|
|
492
|
+
const editor = new NeikiEditor('#editor');
|
|
493
|
+
</script>
|
|
494
|
+
```
|
|
495
|
+
|
|
496
|
+
### React
|
|
497
|
+
|
|
498
|
+
```jsx
|
|
499
|
+
import { useEffect, useRef } from 'react';
|
|
500
|
+
|
|
501
|
+
function NeikiEditorComponent({ value, onChange }) {
|
|
502
|
+
const ref = useRef(null);
|
|
503
|
+
const editorRef = useRef(null);
|
|
504
|
+
|
|
505
|
+
useEffect(() => {
|
|
506
|
+
editorRef.current = new NeikiEditor(ref.current, {
|
|
507
|
+
onChange: (content) => onChange?.(content)
|
|
508
|
+
});
|
|
509
|
+
if (value) editorRef.current.setContent(value);
|
|
510
|
+
return () => editorRef.current?.destroy();
|
|
511
|
+
}, []); // initialize once
|
|
512
|
+
|
|
513
|
+
return <textarea ref={ref} defaultValue={value} />;
|
|
514
|
+
}
|
|
515
|
+
```
|
|
516
|
+
|
|
517
|
+
> Do not include `value` in the effect dependency array — that would recreate the editor on every keystroke. Update content imperatively with `setContent()` instead.
|
|
518
|
+
|
|
519
|
+
### Vue 3 (Composition API)
|
|
520
|
+
|
|
521
|
+
```vue
|
|
522
|
+
<template>
|
|
523
|
+
<textarea ref="editorEl"></textarea>
|
|
524
|
+
</template>
|
|
525
|
+
|
|
526
|
+
<script setup>
|
|
527
|
+
import { ref, onMounted, onBeforeUnmount } from 'vue';
|
|
528
|
+
|
|
529
|
+
const props = defineProps({ modelValue: { type: String, default: '' } });
|
|
530
|
+
const emit = defineEmits(['update:modelValue']);
|
|
531
|
+
const editorEl = ref(null);
|
|
532
|
+
let editor = null;
|
|
533
|
+
|
|
534
|
+
onMounted(() => {
|
|
535
|
+
editor = new NeikiEditor(editorEl.value, {
|
|
536
|
+
onChange: (content) => emit('update:modelValue', content)
|
|
537
|
+
});
|
|
538
|
+
if (props.modelValue) editor.setContent(props.modelValue);
|
|
539
|
+
});
|
|
540
|
+
|
|
541
|
+
onBeforeUnmount(() => editor?.destroy());
|
|
542
|
+
</script>
|
|
543
|
+
```
|
|
544
|
+
|
|
545
|
+
### AJAX auto-save
|
|
546
|
+
|
|
547
|
+
```javascript
|
|
548
|
+
const editor = new NeikiEditor('#editor', {
|
|
549
|
+
onChange: debounce(function (content) {
|
|
550
|
+
fetch('/api/save', {
|
|
551
|
+
method: 'POST',
|
|
552
|
+
headers: { 'Content-Type': 'application/json' },
|
|
553
|
+
body: JSON.stringify({ content })
|
|
554
|
+
});
|
|
555
|
+
}, 2000)
|
|
556
|
+
});
|
|
557
|
+
```
|
|
558
|
+
|
|
559
|
+
The wiki also includes a [Laravel Blade](https://github.com/neikiri/neiki-editor/wiki/Integration-Guide) example and a full integration checklist.
|
|
560
|
+
|
|
561
|
+
---
|
|
562
|
+
|
|
563
|
+
## Security notes
|
|
564
|
+
|
|
565
|
+
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.
|
|
566
|
+
|
|
567
|
+
> 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.
|
|
568
|
+
|
|
569
|
+
A few additional considerations:
|
|
570
|
+
|
|
571
|
+
- **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.
|
|
572
|
+
- **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](https://github.com/neikiri/neiki-editor/wiki/Security) page for example CSP directives.
|
|
573
|
+
|
|
574
|
+
---
|
|
575
|
+
|
|
576
|
+
## Documentation
|
|
577
|
+
|
|
578
|
+
Full documentation lives in the project wiki:
|
|
579
|
+
|
|
580
|
+
- [Home](https://github.com/neikiri/neiki-editor/wiki/Home)
|
|
581
|
+
- [Getting Started](https://github.com/neikiri/neiki-editor/wiki/Getting-Started)
|
|
582
|
+
- [Configuration](https://github.com/neikiri/neiki-editor/wiki/Configuration)
|
|
583
|
+
- [Toolbar Reference](https://github.com/neikiri/neiki-editor/wiki/Toolbar-Reference)
|
|
584
|
+
- [API Reference](https://github.com/neikiri/neiki-editor/wiki/API-Reference)
|
|
585
|
+
- [Plugin API](https://github.com/neikiri/neiki-editor/wiki/Plugin-API)
|
|
586
|
+
- [Integration Guide](https://github.com/neikiri/neiki-editor/wiki/Integration-Guide)
|
|
587
|
+
- [Advanced Features](https://github.com/neikiri/neiki-editor/wiki/Advanced-Features)
|
|
588
|
+
- [Themes & Styling](https://github.com/neikiri/neiki-editor/wiki/Themes-and-Styling)
|
|
589
|
+
- [Security](https://github.com/neikiri/neiki-editor/wiki/Security)
|
|
590
|
+
|
|
591
|
+
**Live demo:** [https://neikiri.dev/editor](https://neikiri.dev/editor)
|
|
592
|
+
|
|
593
|
+
---
|
|
594
|
+
|
|
595
|
+
## Browser support
|
|
596
|
+
|
|
597
|
+
Neiki's Editor uses `contentEditable` and standard DOM APIs and targets current versions of modern browsers.
|
|
598
|
+
|
|
599
|
+
| Browser | Support |
|
|
600
|
+
|---------|---------|
|
|
601
|
+
| Chrome | Latest |
|
|
602
|
+
| Firefox | Latest |
|
|
603
|
+
| Safari | Latest |
|
|
604
|
+
| Edge | Latest |
|
|
605
|
+
| Opera | Latest |
|
|
606
|
+
|
|
607
|
+
> Internet Explorer is not supported.
|
|
608
|
+
|
|
609
|
+
---
|
|
610
|
+
|
|
611
|
+
## File structure
|
|
612
|
+
|
|
613
|
+
```
|
|
614
|
+
neiki-editor/
|
|
615
|
+
├── .github/
|
|
616
|
+
│ └── workflows/
|
|
617
|
+
│ ├── ci.yml # Continuous integration workflow
|
|
618
|
+
│ ├── codeql.yml # CodeQL security analysis
|
|
619
|
+
│ └── publish.yml # NPM/CDN publish workflow
|
|
620
|
+
├── assets/
|
|
621
|
+
│ ├── logo.png # Project logo
|
|
622
|
+
│ └── preview.png # Editor preview screenshot
|
|
623
|
+
├── demo/
|
|
624
|
+
│ ├── index.html # Interactive demo page
|
|
625
|
+
│ └── logo.png # Demo page logo
|
|
626
|
+
├── dist/
|
|
627
|
+
│ ├── neiki-editor.css # Editor styles (unminified)
|
|
628
|
+
│ ├── neiki-editor.js # Editor core (unminified)
|
|
629
|
+
│ ├── neiki-editor.min.css # Minified styles
|
|
630
|
+
│ └── neiki-editor.min.js # Minified editor + embedded CSS (recommended)
|
|
631
|
+
├── php/
|
|
632
|
+
│ └── neiki-editor.php # PHP integration helper
|
|
633
|
+
├── src/
|
|
634
|
+
│ ├── neiki-editor.css # Source CSS styles
|
|
635
|
+
│ └── neiki-editor.js # Source JavaScript
|
|
636
|
+
├── .gitattributes
|
|
637
|
+
├── .gitignore
|
|
638
|
+
├── CHANGELOG.md
|
|
639
|
+
├── CODE_OF_CONDUCT.md
|
|
640
|
+
├── CONTRIBUTING.md
|
|
641
|
+
├── LICENSE
|
|
642
|
+
├── README.md
|
|
643
|
+
├── SECURITY.md
|
|
644
|
+
├── package-lock.json
|
|
645
|
+
└── package.json
|
|
646
|
+
```
|
|
647
|
+
|
|
648
|
+
---
|
|
649
|
+
|
|
650
|
+
## Contributing
|
|
651
|
+
|
|
652
|
+
Contributions are welcome. Please review [CONTRIBUTING.md](CONTRIBUTING.md) and the [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md) before opening an issue or pull request. Security-related reports should follow [SECURITY.md](SECURITY.md).
|
|
653
|
+
|
|
654
|
+
The editor source lives in `src/` (`neiki-editor.js`, `neiki-editor.css`); the distributable builds are in `dist/`.
|
|
655
|
+
|
|
656
|
+
---
|
|
657
|
+
|
|
658
|
+
## License
|
|
659
|
+
|
|
660
|
+
Released under the **GNU Affero General Public License v3.0** (`AGPL-3.0-or-later`). See the [LICENSE](LICENSE) file for details.
|
|
661
|
+
|
|
662
|
+
---
|
|
663
|
+
|
|
664
|
+
<p align="center">
|
|
665
|
+
Made with ❤️ for the web community
|
|
666
|
+
</p>
|