Recent changes to Integration Guide

Integration Guide modified by neikiri

neikiri — Tue, 09 Jun 2026 08:13:02 -0000

--- v8
+++ v9
@@ -303,14 +303,14 @@

 Before going live, verify:

-- [ ] **Assets loaded once** — CSS before JS, no duplicates
-- [ ] **Textarea has a unique ID** — required for initialization
-- [ ] **Editor initialized after DOM ready** — `<script>` after textarea or use `DOMContentLoaded`
-- [ ] **Server-side sanitization** — never trust raw HTML from clients
-- [ ] **`destroy()` on unmount** — required in SPA components (Vue, React)
-- [ ] **CSRF token included** in AJAX save requests
-- [ ] **`imageUploadHandler` configured** for production (avoids base64 bloat)
-- [ ] **`autosaveKey` set** if multiple editors on same URL edit different records
+-  **Assets loaded once** — CSS before JS, no duplicates
+-  **Textarea has a unique ID** — required for initialization
+-  **Editor initialized after DOM ready** — `<script>` after textarea or use `DOMContentLoaded`
+-  **Server-side sanitization** — never trust raw HTML from clients
+-  **`destroy()` on unmount** — required in SPA components (Vue, React)
+-  **CSRF token included** in AJAX save requests
+-  **`imageUploadHandler` configured** for production (avoids base64 bloat)
+-  **`autosaveKey` set** if multiple editors on same URL edit different records

 ---

@@ -318,13 +318,13 @@

 | | |
 |---|---|
-| [🚀 Getting Started](Getting-Started) | Install and first steps |
-| [⚙️ Configuration](Configuration) | All init options |
-| [🔒 Security](Security) | Sanitization, XSS protection details |
-| [📋 API Reference](API-Reference) | `getContent`, `setContent`, `destroy` and all methods |
+| [🚀 Getting Started](/p/neiki-editor/wiki/Getting%20Started) | Install and first steps |
+| [⚙️ Configuration](/p/neiki-editor/wiki/Configuration) | All init options |
+| [🔒 Security](/p/neiki-editor/wiki/Security) | Sanitization, XSS protection details |
+| [📋 API Reference](/p/neiki-editor/wiki/API%20Reference) | `getContent`, `setContent`, `destroy` and all methods |

 ---

 <div align="center">

-  <sub><a href="Home">← Back to Home</a></sub>
+  <sub><a href="/p/neiki-editor/wiki/Home">← Back to Home</a></sub>
 </div>
</pre>

</script>

Integration Guide modified by neikiri

neikiri — Tue, 09 Jun 2026 06:07:53 -0000

--- v7
+++ v8
@@ -1,6 +1,6 @@
 # 🔗 Integration Guide

-Learn how to integrate Neiki's Editor into your existing projects — PHP, Vue.js, React, or plain AJAX.
+> Integrate Neiki's Editor into PHP, Vue.js, React, Laravel, and plain AJAX projects.

 ---

@@ -8,10 +8,7 @@

 ### Using the PHP Helper (Recommended)

-Neiki's Editor ships with a PHP helper class in `php/neiki-editor.php` that handles asset loading, rendering, and HTML sanitization.
-
-> [!TIP]
-> The PHP helper is the easiest way to integrate the editor into any PHP project — CMS, blog, admin panel, or custom application.
+The editor ships with `php/neiki-editor.php` — a helper class that handles asset loading, rendering, and HTML sanitization.

 #### Step 1 — Include the helper

@@ -25,7 +22,7 @@
         
     

-This outputs both the CSS `<link>` and JS `<script>` tags. It prevents duplicate includes if called multiple times.
+This outputs the CSS `<link>` and JS `<script>` tags and prevents duplicate includes if called multiple times.

 #### Step 3 — Render the editor

@@ -53,29 +50,27 @@
     $stmt->execute([$cleanHTML, $articleId]);

 > [!CAUTION]
-> **Always sanitize** user-submitted HTML before saving to a database. The `NeikiEditor::sanitize()` method strips dangerous tags (`<script>`, `<iframe>`, etc.), event handler attributes (`onclick`, `onerror`), and `javascript:` protocol URLs.
-
-#### PHP Helper API Reference
+> **Always sanitize** user-submitted HTML server-side before saving to a database. `NeikiEditor::sanitize()` strips dangerous tags (`<script>`, `<iframe>`), event handler attributes (`onclick`, `onerror`), and `javascript:` protocol URLs.
+
+---
+
+### PHP Helper API Reference

 | Method | Description |
-|--------|-------------|
-| `NeikiEditor::assets()` | Output CSS & JS tags from CDN. Call once per page. |
+|---|---|
+| `NeikiEditor::assets()` | Output CDN CSS + JS tags. Call once per page. |
 | `NeikiEditor::assets(true, '/path/to/dist')` | Use local files instead of CDN. |
-| `NeikiEditor::render($id, $content, $options)` | Render a `<textarea>` with auto-initialization script. |
+| `NeikiEditor::render($id, $content, $options)` | Render `<textarea>` with initialization script. |
 | `NeikiEditor::sanitize($html)` | Sanitize HTML — strips dangerous tags and attributes. |

 #### Using Local Assets

-If you're hosting the editor files yourself instead of using CDN:
-
     :::php
     <?= NeikiEditor::assets(true, '/assets/vendor/neiki-editor/dist') ?>

 ---

-### Manual PHP Integration
-
-If you prefer not to use the helper class:
+### Manual PHP Integration (Without Helper)

     :::php
     <head>
@@ -93,72 +88,74 @@
         </script>
     

-> [!IMPORTANT]
-> When outputting user content into a `<textarea>`, always use `htmlspecialchars()` to prevent XSS. The PHP helper handles this automatically.
-
----
-
-## 💾 AJAX Save
-
-Save content asynchronously without a full page refresh.
-
-### Using `onSave` (Recommended)
-
-The `onSave` callback is triggered when the user presses **Ctrl+S** or clicks **Save** in the More menu (⋯):
-

-    :::javascript
-    const editor = new NeikiEditor('#editor', {
-        onSave: function(content) {
-            fetch('/api/articles/save', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
-                },
-                body: JSON.stringify({ content })
-            })
-            .then(response => response.json())
-            .then(data => console.log('Saved:', data))
-            .catch(error => console.error('Save failed:', error));
-        }
-    });
-
-### Using `onChange` with Debounce
-
-For auto-saving on every content change:
-
-    :::javascript
-    const editor = new NeikiEditor('#editor', {
-        onChange: debounce(function(content) {
-            fetch('/api/articles/save', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
-                },
-                body: JSON.stringify({ content })
-            })
-            .then(response => response.json())
-            .then(data => console.log('Saved:', data))
-            .catch(error => console.error('Save failed:', error));
-        }, 2000)
-    });
-    
-    // Simple debounce utility
-    function debounce(fn, delay) {
-        let timer;
-        return function(...args) {
-            clearTimeout(timer);
-            timer = setTimeout(() => fn.apply(this, args), delay);
-        };
+---
+
+## ⚛️ React Integration
+
+### Functional Component with Hooks
+
+    :::jsx
+    import { useEffect, useRef } from 'react';
+    
+    function NeikiEditorComponent({ value, onChange, options = {} }) {
+        const textareaRef = useRef(null);
+        const editorRef = useRef(null);
+        const onChangeRef = useRef(onChange);
+    
+        // Keep callback ref updated without re-initializing
+        useEffect(() => {
+            onChangeRef.current = onChange;
+        }, [onChange]);
+    
+        useEffect(() => {
+            if (!textareaRef.current) return;
+    
+            editorRef.current = new NeikiEditor(textareaRef.current, {
+                ...options,
+                onChange: (content) => {
+                    onChangeRef.current?.(content);
+                }
+            });
+    
+            if (value) {
+                editorRef.current.setContent(value);
+            }
+    
+            return () => {
+                editorRef.current?.destroy();
+                editorRef.current = null;
+            };
+        }, []); // Initialize once only
+    
+        return <textarea ref={textareaRef} defaultValue={value} />;
     }
-
-> [!TIP]
-> Use `onSave` for explicit saves (user-initiated), or `onChange` with debounce for auto-saving. A 2-second debounce prevents excessive API calls while the user is typing.
-
----
-
-## 🟢 Vue.js
+    
+    export default NeikiEditorComponent;
+
+**Usage:**
+
+    :::jsx
+    import { useState } from 'react';
+    import NeikiEditorComponent from './NeikiEditorComponent';
+    
+    function ArticleForm() {
+        const [content, setContent] = useState('');
+    
+        return (
+            <NeikiEditorComponent
+                value={content}
+                onChange={setContent}
+                options={{ minHeight: 400, theme: 'dark' }}
+            />
+        );
+    }
+
+> [!CAUTION]
+> Do **not** include `value` in the `useEffect` dependency array. This would destroy and recreate the editor on every keystroke. Use `setContent()` imperatively if you need to update content externally.
+
+---
+
+## 💚 Vue.js Integration

 ### Vue 3 (Composition API)

@@ -175,7 +172,6 @@
     });

     const emit = defineEmits(['update:modelValue']);

-    
     const editorEl = ref(null);
     let editorInstance = null;

@@ -202,6 +198,8 @@
     <template>
         <NeikiEditorComponent v-model="article.body" />
     </template>
+
+---

 ### Vue 2 (Options API)

@@ -232,82 +230,16 @@
     </script>

 > [!NOTE]
-> Make sure to call `editor.destroy()` in your component's unmount/destroy lifecycle hook to prevent memory leaks.
-
----
-
-## ⚛️ React
-
-### Functional Component with Hooks
-

-    :::jsx
-    import { useEffect, useRef, useCallback } from 'react';
-    
-    function NeikiEditorComponent({ value, onChange, options = {} }) {
-        const textareaRef = useRef(null);
-        const editorRef = useRef(null);
-        const onChangeRef = useRef(onChange);
-    
-        // Keep callback ref updated
-        useEffect(() => {
-            onChangeRef.current = onChange;
-        }, [onChange]);
-    
-        useEffect(() => {
-            if (!textareaRef.current) return;
-    
-            editorRef.current = new NeikiEditor(textareaRef.current, {
-                ...options,
-                onChange: (content) => {
-                    onChangeRef.current?.(content);
-                }
-            });
-    
-            if (value) {
-                editorRef.current.setContent(value);
-            }
-    
-            return () => {
-                editorRef.current?.destroy();
-                editorRef.current = null;
-            };
-        }, []); // Initialize once
-    
-        return <textarea ref={textareaRef} defaultValue={value} />;
-    }
-    
-    export default NeikiEditorComponent;
-
-**Usage:**
-
-    :::jsx
-    import NeikiEditorComponent from './NeikiEditorComponent';
-    
-    function ArticleForm() {
-        const [content, setContent] = useState('');
-    
-        return (
-            <NeikiEditorComponent
-                value={content}
-                onChange={setContent}
-                options={{ minHeight: 400, theme: 'dark' }}
-            />
-        );
-    }
-
-> [!CAUTION]
-> Do **not** pass `value` as a dependency to the `useEffect` that creates the editor. This would destroy and recreate the editor on every content change. Use `setContent()` to update content imperatively if needed.
-
----
-
-## 🧱 Laravel Blade
+> Always call `editor.destroy()` in `onBeforeUnmount` / `beforeDestroy` to prevent memory leaks.
+
+---
+
+## 🟠 Laravel Blade

     :::blade
     {{-- resources/views/components/editor.blade.php --}}

     @once

-    @push('styles')
-    @endpush
     @push('scripts')
     <script src="https://cdn.neikiri.dev/neiki-editor/neiki-editor.min.js"></script>
     @endpush
@@ -332,24 +264,64 @@

 ---

+## 📡 AJAX Auto-Save
+
+Save content automatically as the user types:
+

+    :::javascript
+    function debounce(fn, delay) {
+        let timer;
+        return function(...args) {
+            clearTimeout(timer);
+            timer = setTimeout(() => fn.apply(this, args), delay);
+        };
+    }
+    
+    const editor = new NeikiEditor('#editor', {
+        onChange: debounce(function(content) {
+            fetch('/api/autosave', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]')?.content
+                },
+                body: JSON.stringify({ content, id: articleId })
+            })
+            .then(res => res.json())
+            .then(data => {
+                document.getElementById('save-status').textContent = 'Saved ' + new Date().toLocaleTimeString();
+            })
+            .catch(() => {
+                document.getElementById('save-status').textContent = 'Save failed';
+            });
+        }, 2000)
+    });
+
+---
+
 ## 📋 Integration Checklist

-Use this checklist to ensure a complete integration:
-
-- [ ] **Assets included** — CSS before JS, loaded once per page
-- [ ] **Textarea has unique ID** — required for initialization
-- [ ] **Editor initialized after DOM ready** — place `<script>` after the textarea or use `DOMContentLoaded`
-- [ ] **Content sanitized server-side** — never trust raw HTML from the client
-- [ ] **Destroy on unmount** — call `editor.destroy()` in SPA component cleanup
-- [ ] **CSRF token included** — for AJAX save requests (if applicable)
+Before going live, verify:
+
+- [ ] **Assets loaded once** — CSS before JS, no duplicates
+- [ ] **Textarea has a unique ID** — required for initialization
+- [ ] **Editor initialized after DOM ready** — `<script>` after textarea or use `DOMContentLoaded`
+- [ ] **Server-side sanitization** — never trust raw HTML from clients
+- [ ] **`destroy()` on unmount** — required in SPA components (Vue, React)
+- [ ] **CSRF token included** in AJAX save requests
+- [ ] **`imageUploadHandler` configured** for production (avoids base64 bloat)
+- [ ] **`autosaveKey` set** if multiple editors on same URL edit different records

 ---

 ## 🔗 Related Pages

-- **[🚀 Getting Started](Getting-Started)** — Installation and first steps
-- **[⚙️ Configuration](Configuration)** — All configuration options
-- **[🔌 Plugin API](Plugin-API)** — Extend with custom plugins
+| | |
+|---|---|
+| [🚀 Getting Started](Getting-Started) | Install and first steps |
+| [⚙️ Configuration](Configuration) | All init options |
+| [🔒 Security](Security) | Sanitization, XSS protection details |
+| [📋 API Reference](API-Reference) | `getContent`, `setContent`, `destroy` and all methods |

 ---

</pre>

</textarea>

Integration Guide modified by neikiri

neikiri — Tue, 09 Jun 2026 06:07:51 -0000

--- v6
+++ v7
@@ -79,7 +79,7 @@

     :::php
     

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

     
@@ -309,7 +309,7 @@
     @push('styles')
     @endpush
     @push('scripts')

-    <script src="https://cdn.neiki.eu/neiki-editor/neiki-editor.min.js"></script>
+    <script src="https://cdn.neikiri.dev/neiki-editor/neiki-editor.min.js"></script>
     @endpush
     @endonce

Integration Guide modified by neikiri

neikiri — Tue, 09 Jun 2026 06:07:50 -0000

--- v5
+++ v6
@@ -1,6 +1,6 @@
 # 🔗 Integration Guide

-Learn how to integrate Neiki Editor into your existing projects — PHP, Vue.js, React, or plain AJAX.
+Learn how to integrate Neiki's Editor into your existing projects — PHP, Vue.js, React, or plain AJAX.

 ---

@@ -8,7 +8,7 @@

 ### Using the PHP Helper (Recommended)

-Neiki Editor ships with a PHP helper class in `php/neiki-editor.php` that handles asset loading, rendering, and HTML sanitization.
+Neiki's Editor ships with a PHP helper class in `php/neiki-editor.php` that handles asset loading, rendering, and HTML sanitization.

 > [!TIP]
 > The PHP helper is the easiest way to integrate the editor into any PHP project — CMS, blog, admin panel, or custom application.

Integration Guide modified by neikiri

neikiri — Tue, 09 Jun 2026 06:07:49 -0000

--- v4
+++ v5
@@ -79,7 +79,7 @@

     :::php
     

-        <script src="https://cdn.jsdelivr.net/gh/neikiri/neiki-editor@2.6.1/dist/neiki-editor.min.js"></script>
+        <script src="https://cdn.neiki.eu/neiki-editor/neiki-editor.min.js"></script>
     

     
@@ -309,7 +309,7 @@
     @push('styles')
     @endpush
     @push('scripts')

-    <script src="https://cdn.jsdelivr.net/gh/neikiri/neiki-editor@2.6.1/dist/neiki-editor.min.js"></script>
+    <script src="https://cdn.neiki.eu/neiki-editor/neiki-editor.min.js"></script>
     @endpush
     @endonce

Integration Guide modified by neikiri

neikiri — Tue, 09 Jun 2026 06:07:49 -0000

--- v3
+++ v4
@@ -79,7 +79,7 @@

     :::php
     

-        <script src="https://cdn.jsdelivr.net/gh/neikiri/neiki-editor@2.6.0/dist/neiki-editor.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/gh/neikiri/neiki-editor@2.6.1/dist/neiki-editor.min.js"></script>
     

     
@@ -309,7 +309,7 @@
     @push('styles')
     @endpush
     @push('scripts')

-    <script src="https://cdn.jsdelivr.net/gh/neikiri/neiki-editor@2.6.0/dist/neiki-editor.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/neikiri/neiki-editor@2.6.1/dist/neiki-editor.min.js"></script>
     @endpush
     @endonce

Integration Guide modified by neikiri

neikiri — Tue, 09 Jun 2026 06:07:48 -0000

--- v2
+++ v3
@@ -79,8 +79,7 @@

     :::php
     

-        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/neikiri/neiki-editor@2.1.0/dist/neiki-editor.css">
-        <script src="https://cdn.jsdelivr.net/gh/neikiri/neiki-editor@2.1.0/dist/neiki-editor.js"></script>
+        <script src="https://cdn.jsdelivr.net/gh/neikiri/neiki-editor@2.6.0/dist/neiki-editor.min.js"></script>
     

     
@@ -308,10 +307,9 @@

     @once
     @push('styles')

-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/neikiri/neiki-editor@2.1.0/dist/neiki-editor.css">
     @endpush
     @push('scripts')
-    <script src="https://cdn.jsdelivr.net/gh/neikiri/neiki-editor@2.1.0/dist/neiki-editor.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/neikiri/neiki-editor@2.6.0/dist/neiki-editor.min.js"></script>
     @endpush
     @endonce

Integration Guide modified by neikiri

neikiri — Tue, 09 Jun 2026 06:07:48 -0000

--- v1
+++ v2
@@ -79,8 +79,8 @@

     :::php
     

-        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/neikiri/neiki-editor@2.0.0/dist/neiki-editor.css">
-        <script src="https://cdn.jsdelivr.net/gh/neikiri/neiki-editor@2.0.0/dist/neiki-editor.js"></script>
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/neikiri/neiki-editor@2.1.0/dist/neiki-editor.css">
+        <script src="https://cdn.jsdelivr.net/gh/neikiri/neiki-editor@2.1.0/dist/neiki-editor.js"></script>
     

     
@@ -101,7 +101,32 @@

 ## 💾 AJAX Save

-Save content asynchronously without a full page refresh:
+Save content asynchronously without a full page refresh.
+
+### Using `onSave` (Recommended)
+
+The `onSave` callback is triggered when the user presses **Ctrl+S** or clicks **Save** in the More menu (⋯):
+

+    :::javascript
+    const editor = new NeikiEditor('#editor', {
+        onSave: function(content) {
+            fetch('/api/articles/save', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
+                },
+                body: JSON.stringify({ content })
+            })
+            .then(response => response.json())
+            .then(data => console.log('Saved:', data))
+            .catch(error => console.error('Save failed:', error));
+        }
+    });
+
+### Using `onChange` with Debounce
+
+For auto-saving on every content change:

     :::javascript
     const editor = new NeikiEditor('#editor', {
@@ -115,12 +140,8 @@
                 body: JSON.stringify({ content })
             })
             .then(response => response.json())

-            .then(data => {
-                console.log('Saved:', data);
-            })
-            .catch(error => {
-                console.error('Save failed:', error);
-            });
+            .then(data => console.log('Saved:', data))
+            .catch(error => console.error('Save failed:', error));
         }, 2000)
     });

@@ -134,7 +155,7 @@
     }

 > [!TIP]
-> A 2-second debounce prevents excessive API calls while the user is typing. Adjust the delay based on your needs.
+> Use `onSave` for explicit saves (user-initiated), or `onChange` with debounce for auto-saving. A 2-second debounce prevents excessive API calls while the user is typing.

 ---

@@ -287,10 +308,10 @@

     @once
     @push('styles')

-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/neikiri/neiki-editor@2.0.0/dist/neiki-editor.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/neikiri/neiki-editor@2.1.0/dist/neiki-editor.css">
     @endpush
     @push('scripts')
-    <script src="https://cdn.jsdelivr.net/gh/neikiri/neiki-editor@2.0.0/dist/neiki-editor.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/neikiri/neiki-editor@2.1.0/dist/neiki-editor.js"></script>
     @endpush
     @endonce

Integration Guide modified by neikiri

neikiri — Tue, 09 Jun 2026 06:07:47 -0000

🔗 Integration Guide

Learn how to integrate Neiki Editor into your existing projects — PHP, Vue.js, React, or plain AJAX.

🐘 PHP Integration

Using the PHP Helper (Recommended)

Neiki Editor ships with a PHP helper class in php/neiki-editor.php that handles asset loading, rendering, and HTML sanitization.

[!TIP]
The PHP helper is the easiest way to integrate the editor into any PHP project — CMS, blog, admin panel, or custom application.

Step 1 — Include the helper

<?php require_once 'path/to/php/neiki-editor.php'; ?>

Step 2 — Output assets in `<head>`

<head>
    <?= NeikiEditor::assets() ?>
</head>

This outputs both the CSS <link> and JS <script> tags. It prevents duplicate includes if called multiple times.

Step 3 — Render the editor

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

Step 4 — Sanitize on save

<?php
// save.php
require_once 'path/to/php/neiki-editor.php';

$cleanHTML = NeikiEditor::sanitize($_POST['content']);

// Save to database
$stmt = $pdo->prepare('UPDATE articles SET body = ? WHERE id = ?');
$stmt->execute([$cleanHTML, $articleId]);

[!CAUTION]
Always sanitize user-submitted HTML before saving to a database. The NeikiEditor::sanitize() method strips dangerous tags (<script>, <iframe>, etc.), event handler attributes (onclick, onerror), and javascript: protocol URLs.

PHP Helper API Reference

Method	Description
`NeikiEditor::assets()`	Output CSS & JS tags from CDN. Call once per page.
`NeikiEditor::assets(true, '/path/to/dist')`	Use local files instead of CDN.
`NeikiEditor::render($id, $content, $options)`	Render a `<textarea>` with auto-initialization script.
`NeikiEditor::sanitize($html)`	Sanitize HTML — strips dangerous tags and attributes.

Using Local Assets

If you're hosting the editor files yourself instead of using CDN:

<?= NeikiEditor::assets(true, '/assets/vendor/neiki-editor/dist') ?>

Manual PHP Integration

If you prefer not to use the helper class:

<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/neikiri/neiki-editor@2.0.0/dist/neiki-editor.css">
    <script src="https://cdn.jsdelivr.net/gh/neikiri/neiki-editor@2.0.0/dist/neiki-editor.js"></script>
</head>

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

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

[!IMPORTANT]
When outputting user content into a <textarea>, always use htmlspecialchars() to prevent XSS. The PHP helper handles this automatically.

💾 AJAX Save

Save content asynchronously without a full page refresh:

const editor = new NeikiEditor('#editor', {
    onChange: debounce(function(content) {
        fetch('/api/articles/save', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            },
            body: JSON.stringify({ content })
        })
        .then(response => response.json())
        .then(data => {
            console.log('Saved:', data);
        })
        .catch(error => {
            console.error('Save failed:', error);
        });
    }, 2000)
});

// Simple debounce utility
function debounce(fn, delay) {
    let timer;
    return function(...args) {
        clearTimeout(timer);
        timer = setTimeout(() => fn.apply(this, args), delay);
    };
}

[!TIP]
A 2-second debounce prevents excessive API calls while the user is typing. Adjust the delay based on your needs.

🟢 Vue.js

Vue 3 (Composition API)

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

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

const props = defineProps({
    modelValue: { type: String, default: '' }
});

const emit = defineEmits(['update:modelValue']);

const editorEl = ref(null);
let editorInstance = null;

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

    if (props.modelValue) {
        editorInstance.setContent(props.modelValue);
    }
});

onBeforeUnmount(() => {
    editorInstance?.destroy();
});
</script>

Usage:

<template>
    <NeikiEditorComponent v-model="article.body" />
</template>

Vue 2 (Options API)

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

<script>
export default {
    props: {
        value: { type: String, default: '' }
    },
    mounted() {
        this.editor = new NeikiEditor(this.$refs.editor, {
            onChange: (content) => {
                this.$emit('input', content);
            }
        });
        if (this.value) {
            this.editor.setContent(this.value);
        }
    },
    beforeDestroy() {
        this.editor?.destroy();
    }
}
</script>

[!NOTE]
Make sure to call editor.destroy() in your component's unmount/destroy lifecycle hook to prevent memory leaks.

⚛️ React

Functional Component with Hooks

import { useEffect, useRef, useCallback } from 'react';

function NeikiEditorComponent({ value, onChange, options = {} }) {
    const textareaRef = useRef(null);
    const editorRef = useRef(null);
    const onChangeRef = useRef(onChange);

    // Keep callback ref updated
    useEffect(() => {
        onChangeRef.current = onChange;
    }, [onChange]);

    useEffect(() => {
        if (!textareaRef.current) return;

        editorRef.current = new NeikiEditor(textareaRef.current, {
            ...options,
            onChange: (content) => {
                onChangeRef.current?.(content);
            }
        });

        if (value) {
            editorRef.current.setContent(value);
        }

        return () => {
            editorRef.current?.destroy();
            editorRef.current = null;
        };
    }, []); // Initialize once

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

export default NeikiEditorComponent;

Usage:

import NeikiEditorComponent from './NeikiEditorComponent';

function ArticleForm() {
    const [content, setContent] = useState('');

    return (
        <NeikiEditorComponent
            value={content}
            onChange={setContent}
            options={{ minHeight: 400, theme: 'dark' }}
        />
    );
}

[!CAUTION]
Do not pass value as a dependency to the useEffect that creates the editor. This would destroy and recreate the editor on every content change. Use setContent() to update content imperatively if needed.

🧱 Laravel Blade

{{-- resources/views/components/editor.blade.php --}}

@once
@push('styles')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/neikiri/neiki-editor@2.0.0/dist/neiki-editor.css">
@endpush
@push('scripts')
<script src="https://cdn.jsdelivr.net/gh/neikiri/neiki-editor@2.0.0/dist/neiki-editor.js"></script>
@endpush
@endonce

<textarea id="{{ $id }}" name="{{ $name }}">{!! e($value ?? '') !!}</textarea>

@push('scripts')
<script>
    new NeikiEditor('#{{ $id }}', @json($options ?? []));
</script>
@endpush

Usage in a Blade view:

<form method="POST" action="{{ route('articles.store') }}">
    @csrf
    <x-editor id="content" name="content" :value="$article->body" :options="['minHeight' => 400]" />
    <button type="submit">Save</button>
</form>

📋 Integration Checklist

Use this checklist to ensure a complete integration:

[ ] Assets included — CSS before JS, loaded once per page
[ ] Textarea has unique ID — required for initialization
[ ] Editor initialized after DOM ready — place <script> after the textarea or use DOMContentLoaded
[ ] Content sanitized server-side — never trust raw HTML from the client
[ ] Destroy on unmount — call editor.destroy() in SPA component cleanup
[ ] CSRF token included — for AJAX save requests (if applicable)

🚀 Getting Started — Installation and first steps
⚙️ Configuration — All configuration options
🔌 Plugin API — Extend with custom plugins

_{← Back to Home}

Recent changes to Integration Guide

Integration Guide modified by neikiri

Integration Guide modified by neikiri

Integration Guide modified by neikiri

Integration Guide modified by neikiri

Integration Guide modified by neikiri

Integration Guide modified by neikiri

Integration Guide modified by neikiri

Integration Guide modified by neikiri

Integration Guide modified by neikiri

🔗 Integration Guide

🐘 PHP Integration

Using the PHP Helper (Recommended)

Step 1 — Include the helper

Step 2 — Output assets in <head>

Step 3 — Render the editor

Step 4 — Sanitize on save

PHP Helper API Reference

Using Local Assets

Manual PHP Integration

💾 AJAX Save

🟢 Vue.js

Vue 3 (Composition API)

Vue 2 (Options API)

⚛️ React

Functional Component with Hooks

🧱 Laravel Blade

📋 Integration Checklist

🔗 Related Pages

Step 2 — Output assets in `<head>`