Recent changes to Getting Started

Getting Started modified by neikiri

neikiri — Tue, 09 Jun 2026 08:10:18 -0000

--- v20
+++ v21
@@ -202,13 +202,13 @@

 | | |
 |---|---|
-| [⚙️ Configuration](Configuration) | Customize every aspect of the editor |
-| [🔧 Toolbar Reference](Toolbar-Reference) | See all 30+ toolbar buttons |
-| [📋 API Reference](API-Reference) | All methods and callbacks |
-| [🔗 Integration Guide](Integration-Guide) | PHP, Vue.js, React examples |
+| [⚙️ Configuration](/p/neiki-editor/wiki/Configuration) | Customize every aspect of the editor |
+| [🔧 Toolbar Reference](/p/neiki-editor/wiki/Toolbar%20Reference) | See all 30+ toolbar buttons |
+| [📋 API Reference](/p/neiki-editor/wiki/API%20Reference) | All methods and callbacks |
+| [🔗 Integration Guide](/p/neiki-editor/wiki/Integration%20Guide) | PHP, Vue.js, React examples |

 ---

 

-  _{← Back to Home}
+  _{← Back to Home}

Getting Started modified by neikiri

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

--- v19
+++ v20
@@ -16,7 +16,7 @@
 ### Option 2 — Pin a Specific Version

     :::html

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

 ### Option 3 — Separate CSS + JS

@@ -25,9 +25,9 @@
     <link rel="stylesheet" href="https://cdn.neikiri.dev/neiki-editor/neiki-editor.css">
     <script src="https://cdn.neikiri.dev/neiki-editor/neiki-editor.js"></script>


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

 ### Option 4 — jsDelivr (Alternative CDN)

@@ -36,7 +36,7 @@
     <script src="https://cdn.jsdelivr.net/gh/neikiri/neiki-editor@latest/dist/neiki-editor.min.js"></script>

     

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

 ### Option 5 — Self-Hosted

Getting Started modified by neikiri

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

--- v18
+++ v19
@@ -16,7 +16,7 @@
 ### Option 2 — Pin a Specific Version

     :::html

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

 ### Option 3 — Separate CSS + JS

@@ -25,9 +25,9 @@
     <link rel="stylesheet" href="https://cdn.neikiri.dev/neiki-editor/neiki-editor.css">
     <script src="https://cdn.neikiri.dev/neiki-editor/neiki-editor.js"></script>


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

 ### Option 4 — jsDelivr (Alternative CDN)

@@ -36,7 +36,7 @@
     <script src="https://cdn.jsdelivr.net/gh/neikiri/neiki-editor@latest/dist/neiki-editor.min.js"></script>

     

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

 ### Option 5 — Self-Hosted

Getting Started modified by neikiri

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

--- v17
+++ v18
@@ -1,39 +1,35 @@
 # 🚀 Getting Started

-Get Neiki's Editor up and running in your project in under 2 minutes.
+> Get Neiki's Editor running in your project in under 2 minutes.

 ---

 ## 📦 Installation

-### CDN (Recommended)
-
-Add this single line — CSS is included automatically, always the **latest version**:
+### Option 1 — CDN (Recommended)
+
+One line. CSS is bundled automatically. Always loads the latest version:

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

-
-📋 More installation options (pinned version, separate CSS/JS, jsDelivr, self-hosted, PHP)
-

-
-#### Pin a specific version
+### Option 2 — Pin a Specific Version

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

-#### Load CSS and JS separately
+### Option 3 — Separate CSS + JS

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


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

-#### Alternative CDN — jsDelivr
+### Option 4 — jsDelivr (Alternative CDN)

     :::html
     
@@ -41,25 +37,22 @@

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

-    
-    
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/neikiri/neiki-editor@latest/dist/neiki-editor.css">
-    <script src="https://cdn.jsdelivr.net/gh/neikiri/neiki-editor@latest/dist/neiki-editor.js"></script>
-    
-    
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/neikiri/neiki-editor@3.0.1/dist/neiki-editor.css">
-    <script src="https://cdn.jsdelivr.net/gh/neikiri/neiki-editor@3.0.1/dist/neiki-editor.js"></script>
-
-#### Self-hosted
-
-    :::html
-    <script src="path/to/neiki-editor.min.js"></script>
-    
-    
-    <link rel="stylesheet" href="path/to/neiki-editor.css">
-    <script src="path/to/neiki-editor.js"></script>
-
-#### PHP Helper
+
+### Option 5 — Self-Hosted
+
+Download the files from [GitHub Releases](https://github.com/neikiri/neiki-editor/releases) and serve them locally:
+
+    :::html
+    <script src="/assets/neiki-editor.min.js"></script>
+
+### Option 6 — npm / Package Manager
+
+    :::bash
+    npm install neiki-editor
+    # or
+    yarn add neiki-editor
+
+### Option 7 — PHP Helper

     :::php
     
@@ -68,9 +61,7 @@
     

 > [!NOTE]
-> The PHP helper outputs both CSS and JS tags automatically and prevents duplicate includes. See the **[Integration Guide](Integration-Guide)** for full details.
-
-
+> The PHP helper outputs both CSS and JS tags and prevents duplicate includes. See the [Integration Guide](Integration-Guide) for full PHP details.

 ---

@@ -83,20 +74,23 @@
         Hello, world!
     

-### Step 2 — Initialize the editor
+Any HTML content inside the textarea is loaded automatically.
+
+### Step 2 — Initialize

     :::html
     <script>
         const editor = new NeikiEditor('#my-editor');
     </script>

-That's it! The editor replaces the `<textarea>` with a fully functional WYSIWYG editor. Any existing content inside the textarea will be loaded automatically.
-
----
-
-## 🧪 Complete Example
-
-Here's a full working HTML page:
+That's it. The textarea is replaced with a full WYSIWYG editor.
+
+> [!IMPORTANT]
+> Always load the CSS **before** the JS file. The editor needs styles to render correctly during initialization.
+
+---
+
+## 🧪 Complete Working Example

     :::html
     <!DOCTYPE html>
@@ -126,14 +120,11 @@
     </body>
     </html>

-> [!IMPORTANT]
-> Always include the CSS file **before** the JS file. The editor needs styles to render correctly on initialization.
-
 ---

 ## 🎯 Initialization Targets

-You can initialize the editor on different element types:
+The editor can be attached to different element types:

 ### Textarea (most common)

@@ -141,7 +132,7 @@
     <textarea id="editor"></textarea>
     <script>new NeikiEditor('#editor');</script>

-### Div
+### Div with existing content

     :::html
     Existing content
@@ -153,14 +144,20 @@
     const element = document.getElementById('editor');
     const editor = new NeikiEditor(element);

+### Multiple editors on one page
+

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

 ## 🔄 Getting Content Back

-After the user edits content, retrieve it for saving:
-

-    :::javascript
-    // Get HTML content
+Retrieve the edited content for saving or processing:
+
+    :::javascript
+    // Get HTML string
     const html = editor.getContent();

     // Get plain text (no HTML tags)
@@ -168,17 +165,47 @@

     // Check if editor is empty
     const empty = editor.isEmpty();
-
-> [!TIP]
-> Use the `onChange` callback for real-time content tracking, the `onSave` callback for explicit saves (triggered by **Ctrl+S** or the More menu → Save), or retrieve content on form submit.

+    
+    // Get structured JSON
+    const json = editor.getJSON();
+
+### Common Pattern — Save on Form Submit
+
+    :::html
+    <form id="user-content-my-form">
+        <textarea id="user-content-editor"></textarea>
+        <button type="submit">Save</button>
+    </form>
+    
+    <script>
+        const editor = new NeikiEditor('#editor');
+    
+        document.getElementById('my-form').addEventListener('submit', function(e) {
+            e.preventDefault();
+            const content = editor.getContent();
+            // send content to your backend...
+        });
+    </script>
+
+### Common Pattern — Real-time Sync via `onChange`
+
+    :::javascript
+    const editor = new NeikiEditor('#editor', {
+        onChange: function(content) {
+            document.getElementById('preview').innerHTML = content;
+        }
+    });

 ---

 ## 🔗 What's Next?

-- **[⚙️ Configuration](Configuration)** — Customize every aspect of the editor
-- **[🔧 Toolbar Reference](Toolbar-Reference)** — See all 30+ available buttons
-- **[🔗 Integration Guide](Integration-Guide)** — PHP, Vue.js, React examples
+| | |
+|---|---|
+| [⚙️ Configuration](Configuration) | Customize every aspect of the editor |
+| [🔧 Toolbar Reference](Toolbar-Reference) | See all 30+ toolbar buttons |
+| [📋 API Reference](API-Reference) | All methods and callbacks |
+| [🔗 Integration Guide](Integration-Guide) | PHP, Vue.js, React examples |

 ---

Getting Started modified by neikiri

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

--- v16
+++ v17
@@ -20,7 +20,7 @@
 #### Pin a specific version

     :::html

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

 #### Load CSS and JS separately

@@ -30,8 +30,8 @@
     <script src="https://cdn.neikiri.dev/neiki-editor/neiki-editor.js"></script>

     

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

 #### Alternative CDN — jsDelivr

@@ -40,15 +40,15 @@
     <script src="https://cdn.jsdelivr.net/gh/neikiri/neiki-editor@latest/dist/neiki-editor.min.js"></script>

     

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

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

     

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

 #### Self-hosted

Getting Started modified by neikiri