Skip to content

Getting Started

Jump to bottom
neikiri edited this page May 19, 2026 · 21 revisions

🚀 Getting Started

Get Neiki's Editor running in your project in under 2 minutes.

📦 Installation

Option 1 — CDN (Recommended)

One line. CSS is bundled automatically. Always loads the latest version:

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

Option 2 — Pin a Specific Version

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

Option 3 — Separate CSS + JS

<!-- Latest -->
<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>

<!-- Pinned to 3.0.2 -->
<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)

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

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

Option 5 — Self-Hosted

Download the files from GitHub Releases and serve them locally:

<script src="/assets/neiki-editor.min.js"></script>

Option 6 — npm / Package Manager

npm install neiki-editor
# or
yarn add neiki-editor

Option 7 — PHP Helper

<?php require_once 'php/neiki-editor.php'; ?>
<head>
    <?= NeikiEditor::assets() ?>
</head>

Note

The PHP helper outputs both CSS and JS tags and prevents duplicate includes. See the Integration Guide for full PHP details.

⚡ Quick Start

Step 1 — Add a <textarea> 

<textarea id="my-editor">
    <p>Hello, world!</p>
</textarea>

Any HTML content inside the textarea is loaded automatically.

Step 2 — Initialize

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Neiki's Editor Demo</title>
    <script src="https://cdn.neikiri.dev/neiki-editor/neiki-editor.min.js"></script>
</head>
<body>
    <h1>My Editor</h1>
    <textarea id="editor">
        <p>Start writing something amazing...</p>
    </textarea>

    <script>
        const editor = new NeikiEditor('#editor', {
            placeholder: 'Type here...',
            minHeight: 400,
            theme: 'light',
            onChange: function(content) {
                console.log('Content changed!');
            }
        });
    </script>
</body>
</html>

🎯 Initialization Targets

The editor can be attached to different element types:

Textarea (most common)

<textarea id="editor"></textarea>
<script>new NeikiEditor('#editor');</script>

Div with existing content

<div id="editor"><p>Existing content</p></div>
<script>new NeikiEditor('#editor');</script>

By DOM reference

const element = document.getElementById('editor');
const editor = new NeikiEditor(element);

Multiple editors on one page

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

🔄 Getting Content Back

Retrieve the edited content for saving or processing:

// Get HTML string
const html = editor.getContent();

// Get plain text (no HTML tags)
const text = editor.getText();

// Check if editor is empty
const empty = editor.isEmpty();

// Get structured JSON
const json = editor.getJSON();

Common Pattern — Save on Form Submit

<form id="my-form">
    <textarea id="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 

const editor = new NeikiEditor('#editor', {
    onChange: function(content) {
        document.getElementById('preview').innerHTML = content;
    }
});

🔗 What's Next?
⚙️ Configuration Customize every aspect of the editor
🔧 Toolbar Reference See all 30+ toolbar buttons
📋 API Reference All methods and callbacks
🔗 Integration Guide PHP, Vue.js, React examples

🖊️ Neiki's Editor

🏠 Home

Getting Started

Reference

Extending

Integration

Features & UI

Project

v3.1.0 · AGPLv3 · Live Demo

Clone this wiki locally