Skip to content

Getting Started

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

🚀 Getting Started

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

📦 Installation

CDN (Recommended)

Add this single line — CSS is included automatically, always the latest version:

<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

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

Load CSS and JS separately

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

<!-- Or pinned -->
<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>

Alternative CDN — jsDelivr

<!-- 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@2.10.1/dist/neiki-editor.min.js"></script>

<!-- Separate files (latest) -->
<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>

<!-- Separate files (pinned) -->
<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>

Self-hosted

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

<!-- Or separate files -->
<link rel="stylesheet" href="path/to/neiki-editor.css">
<script src="path/to/neiki-editor.js"></script>

PHP Helper

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

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

⚡ Quick Start

Step 1 — Add a <textarea> 

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

Step 2 — Initialize the editor

<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:

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

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:

Textarea (most common)

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

Div

<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);

🔄 Getting Content Back

After the user edits content, retrieve it for saving:

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

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

// 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.

🔗 What's Next?

🖊️ Neiki's Editor

🏠 Home

Getting Started

Reference

Extending

Integration

Features & UI

Project

v3.1.0 · AGPLv3 · Live Demo

Clone this wiki locally