Das Native-First-Hochleistungs-Markdown-Plugin für JavaScript

Markdown-Texteditor-Plugin, das einen nativen Textbereich in eine vollständige Bearbeitungssuite umwandelt – keine Synchronisierung erforderlich. WYSIWYG- und einfacher Markdown-Modus, Live-Vorschau, Suchen & Ersetzen, RTL-Unterstützung, Dunkelmodus. Funktioniert mit Django, Laravel, Rails, Node.js, PHP und jedem Stack.

Installation

NPM (Bundler: Vite, webpack, Rollup usw.)

npm install markdown-text-editor

1
2

import MarkdownEditor from 'markdown-text-editor';
new MarkdownEditor('#markdown-editor');

CDN: ES-Modul

1
2
3
4

<script type="module">
  import MarkdownEditor from 'https://cdn.jsdelivr.net/npm/markdown-text-editor/+esm';
  new MarkdownEditor('#markdown-editor');
</script>

CDN: globales Skript-Tag (IIFE)

Kein Import erforderlich – MarkdownEditor ist automatisch als globale Variable verfügbar.

1
2
3
4
5
6
7
8
9

<form action="/api/save" method="POST">
  <textarea id="markdown-editor" name="content"># Hello World</textarea>
  <button type="submit">Save Content</button>
</form>

<script src="https://cdn.jsdelivr.net/npm/markdown-text-editor"></script>
<script>
  new MarkdownEditor('#markdown-editor');
</script>

Demo zum Markdown-Editor

Schnellstart

Übergeben Sie ein Optionsobjekt, um den Editor anzupassen. Alle Optionen sind optional – lassen Sie alle weg, um den Standardwert zu verwenden.

1
2
3
4

const editor = new MarkdownEditor('#markdown-editor', {
  placeholder: 'Write your markdown...',
  toolbar: ['heading', 'bold', 'italic', 'strikethrough', 'ul', 'ol', 'checklist', 'blockquote', 'link', 'preview'],
});

Die Philosophie: „Native-First“

Die meisten Redakteure unterbrechen den Standard-Web-Workflow. MarkdownEditor ist davon überzeugt. Da es sich direkt über einem <textarea> befindet, müssen Sie keinen neuen Umgang mit Daten erlernen.

• Keine Datenbindung erforderlich: Funktioniert sofort mit <form method="POST">
• Standardzugriff: Verwenden Sie document.getElementById('editor').value wie eine normale Eingabe.
• Backend-Agnostisch: Funktioniert mit jedem Backend (Python, Node.js, PHP usw.) wie ein normales Formularfeld

MarkdownEditor vs. EasyMDE / SimpleMDE

Die meisten JavaScript-Markdown-Editoren – EasyMDE, SimpleMDE, CodeMirror-basierte Editoren – ersetzen Ihren <textarea> durch ein benutzerdefiniertes Element. Das bedeutet, dass die Formularübermittlung unterbrochen wird, .value nichts zurückgibt und Sie zusätzlichen Code schreiben müssen, nur um den Inhalt wieder auszulesen. MarkdownEditor ist anders als – es erweitert Ihren vorhandenen Textbereich und ersetzt ihn niemals.

Framework-Integration

Da MarkdownEditor das native <textarea> beibehält, lässt es sich ohne zusätzlichen Code in jedes Backend-Framework integrieren. Ihr Server empfängt den Markdown-Inhalt genau so, wie er es von jedem Standardformularfeld tun würde.

Django

Fügen Sie Ihrem Textbereichs-Widget ein class hinzu und initialisieren Sie den Editor – request.POST['content'] funktioniert ohne zusätzliche Schritte.

1
2
3
4
5
6
7
8

# forms.py
class PostForm(forms.ModelForm):
    class Meta:
        model = Post
        fields = ['content']
        widgets = {
            'content': forms.Textarea(attrs={'class': 'markdown-editor'}),
        }

1
2

new MarkdownEditor('.markdown-editor');
// request.POST['content'] contains the markdown on submit

Laravel

Verwenden Sie f.text_area mit einer Klasse – $request->input('content') empfängt den Markdown direkt.

1
2

<textarea name="content" class="markdown-editor">{{ old('content') }}</textarea>
<script>new MarkdownEditor('.markdown-editor');</script>

Ruby on Rails

Funktioniert standardmäßig mit form_with – params[:content] enthält den Markdown. Verwenden Sie für Turbo Drive turbo:load anstelle von DOMContentLoaded.

1
2
3
4
5
6

document.addEventListener('turbo:load', () => {
    document.querySelectorAll('.markdown-editor:not([data-mde-init])').forEach(el => {
        el.setAttribute('data-mde-init', 'true');
        new MarkdownEditor(el);
    });
});

Node.js / Express

req.body.content erhält den Markdown beim Absenden des Formulars – kein Synchronisierungsschritt, keine benutzerdefinierte Extraktion.

1
2
3

<textarea name="content" class="markdown-editor"></textarea>
<script src="https://cdn.jsdelivr.net/npm/markdown-text-editor"></script>
<script>new MarkdownEditor('.markdown-editor');</script>

PHP

$_POST['content'] funktioniert genauso wie jeder Standard-Textbereich – fügen Sie es ein und Ihre bestehende Formularverarbeitung erfordert keine Änderungen.

1
2
3
4
5
6

<form method="POST" action="save.php">
  <textarea name="content" class="markdown-editor"></textarea>
  <button type="submit">Save</button>
</form>
<script src="https://cdn.jsdelivr.net/npm/markdown-text-editor"></script>
<script>new MarkdownEditor('.markdown-editor');</script>

Konfiguration

Sie können das Verhalten und die Benutzeroberfläche des Editors vollständig anpassen, indem Sie ein options-Objekt übergeben. Wenn Sie eine Option weglassen, wird der Standard-Wert verwendet.

🛠 Anpassung der Symbolleiste

Die Symbolleiste ist modular aufgebaut. Durch Modifizieren des Arrays können Sie ein minimales Erlebnis oder eine leistungsstarke Suite mit vollem Funktionsumfang schaffen.

Verfügbare Tools

Werkzeugreferenz

💡 Umsetzungstipps:

• Neuordnung: Die Schaltflächen werden genau in der Reihenfolge angezeigt, in der Sie sie im Array auflisten
• Entfernen: Lassen Sie einfach einen beliebigen Schlüssel (wie image) aus dem Array weg, um diese Funktion vollständig für den Benutzer zu deaktivieren
• Native Fallback: Wenn Sie in JS keinen placeholder angeben, verwendet das Plugin automatisch das placeholder-Attribut aus Ihrem HTML-<textarea>

📊 Fußzeile (Statusleiste)

Die Fußzeile befindet sich unterhalb des Editors und zeigt die Zeile, Spalte des Cursors, die Zeichenanzahl des Dokuments und optional die Wortanzahl an – alles in Echtzeit aktualisiert. Es ist standardmäßig sichtbar und jede Statistik kann unabhängig umgeschaltet werden.

Anwendungsbeispiele

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

// Default — line, col, and chars visible
new MarkdownEditor('#editor');

// Disable the footer entirely
new MarkdownEditor('#editor', { footer: false });

// Hide only character count
new MarkdownEditor('#editor', { footer: { chars: false } });

// Hide line and column, keep character count
new MarkdownEditor('#editor', { footer: { line: false, col: false } });

// Show only line number
new MarkdownEditor('#editor', { footer: { col: false, chars: false } });

// Enable word count alongside the defaults
new MarkdownEditor('#editor', { footer: { words: true } });

// Show word count only
new MarkdownEditor('#editor', { footer: { line: false, col: false, chars: false, words: true } });

🔀 Bearbeitungsmodi

MarkdownEditor bietet zwei unterschiedliche Möglichkeiten zum Schreiben und Formatieren Ihrer Inhalte. Sie können zwischen einer traditionellen syntaxorientierten Ansicht und einem modernen, visuell ausgerichteten Erlebnis wechseln.

• plain (Standard): Eine saubere, leistungsstarke Markdown-Umgebung, in der die Syntax (wie **bold** oder # heading) sichtbar ist. Ideal für Entwickler und Markdown-Puristen
• hybrid: Ein WYSIWYG-inspiriertes Erlebnis, das Formatierungen (Fett, Kursiv, Überschriften) während der Eingabe in Echtzeit wiedergibt und dabei die zugrunde liegende Markdown-Struktur beibehält.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

// Default initialization (Plain Mode)
new MarkdownEditor('#markdown-editor');

// Explicit Plain Mode
new MarkdownEditor('#markdown-editor', {
    mode: 'plain'
});

// Hybrid (Visual) Mode
new MarkdownEditor('#markdown-editor', {
    mode: 'hybrid'
});

Vorschau des Hybrid- und Normalmodus:

Hybridmodus

Visuelle Formatierungen werden während der Eingabe in Echtzeit gerendert.

Einfacher Modus (Standard)

Konzentriert sich auf die reine Markdown-Syntax für ein unkompliziertes Erlebnis.

🌙 Thematisierung

MarkdownEditor erbt sein Design automatisch von der umgebenden Seite – keine Konfiguration erforderlich. Der Editor liest bei der Initialisierung data-theme vom nächstgelegenen Vorfahren, sodass es sofort mit dem Theme Ihrer Website synchronisiert bleibt.

Wie das Thema gelöst wird (Prioritätsreihenfolge)

1. theme-Option – explizite Überschreibung, die im Optionsobjekt übergeben wird
2. data-theme auf dem <textarea> – direkt auf dem Element festgelegt
3. data-theme auf einem beliebigen Vorfahren – z.B. <html>, <body> oder ein Wrapper <div>

Verfügbare Themen

'light' (Standard), 'dark', 'snowberry', 'darkberry'

Option 1 – von <html> oder einem beliebigen Vorfahren erben (keine Konfiguration)

1
2
3
4
5
6

<html data-theme="dark">
  ...
  <textarea id="markdown-editor"></textarea>
  <script>
    new MarkdownEditor('#markdown-editor'); // picks up dark automatically
  </script>

Option 2 – data-theme direkt auf <textarea> festlegen

1
2
3
4

<textarea id="markdown-editor" data-theme="dark"></textarea>
<script>
  new MarkdownEditor('#markdown-editor');
</script>

Option 3 – explizite theme-Option (überschreibt alles)

1
2
3

new MarkdownEditor('#markdown-editor', {
    theme: 'dark'
});

🎨 Benutzerdefiniertes Design über CSS-Variablen

Sie können das Aussehen des Editors vollständig anpassen, indem Sie seine CSS-Variablen im Element .markdown-editor-wrapper oder einem beliebigen [data-theme]-Selektor überschreiben. Alle Farben verwenden den OKLCH-Farbraum für wahrnehmungsmäßig einheitliche Ergebnisse.

Beispiel für ein benutzerdefiniertes Theme

Überschreiben Sie alle Variablen in .markdown-editor-wrapper, nachdem der Editor initialisiert wurde, oder definieren Sie einen benutzerdefinierten [data-theme]-Block in Ihrem Stylesheet:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

/* Override individual variables */
.markdown-editor-wrapper {
    --color-primary: oklch(60% 0.2 30);   /* orange accent */
    --border-radius: 0.5rem;
}

/* Or define a full custom theme */
[data-theme="brand"] .markdown-editor-wrapper,
.markdown-editor-wrapper[data-theme="brand"] {
    --color-base:       oklch(15% 0.01 250);
    --color-on-base:    oklch(95% 0 0);
    --color-primary:    oklch(65% 0.22 145);   /* green */
    --color-on-primary: oklch(10% 0 0);
    --color-accent:     oklch(75% 0.18 60);
    --color-neutral:    oklch(80% 0 0);
    --border-radius:    0.75rem;
}

new MarkdownEditor('#markdown-editor', { theme: 'brand' });

Inhalts-API

Eine der Hauptstärken von MarkdownEditor besteht darin, dass der zugrunde liegende <textarea> perfekt synchronisiert bleibt. Unabhängig davon, ob Sie ein modernes JavaScript-Framework oder ein traditionelles Backend wie Django, PHP oder Laravel verwenden, bleibt der Workflow einfach und nativ.

Inhalte lesen und schreiben

1. Der native Weg (empfohlen)

Da der Editor einen Standardtextbereich erweitert, können Sie bekannte DOM-Methoden verwenden. Dies ist der schnellste Weg, mit Ihren Daten zu interagieren, ohne eine neue API zu erlernen.

1
2
3
4
5

// Retrieve content via ID
const markdown = document.getElementById('markdown-editor').value;

// Set content via ID (The editor UI updates automatically)
document.getElementById('markdown-editor').value = "# New Heading Content";

2. Verwenden einer Variablenreferenz

Wenn Sie einen Verweis auf das Textarea-Element haben, können Sie es direkt verwenden – es ist keine bibliotheksspezifische API erforderlich.

1
2
3
4
5
6
7

const textarea = document.getElementById('markdown-editor');

// Retrieve content
const markdown = textarea.value;

// Set content (the editor UI reflects this immediately)
textarea.value = "## Updated via JS";

3. Festlegen des anfänglichen Inhalts auf der Serverseite

Die empfohlene Methode zum Festlegen des anfänglichen Inhalts ist direkt im <textarea>-HTML – dies funktioniert natürlich mit jedem Backend-Framework (Django, Laravel, Rails, PHP usw.) und der Editor rendert ihn automatisch bei init.

1
2

<!-- Recommended: set content server-side -->
<textarea id="markdown-editor"># Hello World</textarea>

Um Inhalte zur Laufzeit zu lesen oder zu aktualisieren, verwenden Sie den nativen Wert textarea. Rufen Sie editor.render() nach einem Update auf, um die Vorschau- und Hybridebene zu aktualisieren.

1
2
3
4
5
6
7
8

const textarea = document.getElementById('markdown-editor');

// Read
const markdown = textarea.value;

// Update at runtime
textarea.value = '# New content';
editor.render();

4. Zerlegen des Editors – destroy()

Rufen Sie editor.destroy() auf, um den Editor-DOM-Wrapper zu entfernen und den ursprünglichen <textarea> an seiner Position im Dokument wiederherzustellen. Nützlich in Single-Page-Anwendungen beim Unmounten einer Ansicht.

1
2
3
4

const editor = new MarkdownEditor('#markdown-editor');

// Remove the editor and restore the plain textarea
editor.destroy();

Mit onChange auf Änderungen reagieren

Übergeben Sie einen onChange-Rückruf, um bei jeder Inhaltsänderung benachrichtigt zu werden. Empfängt die aktuelle Markdown-Zeichenfolge.

1
2
3
4
5

const editor = new MarkdownEditor('#markdown-editor', {
    onChange(value) {
        console.log('Content changed:', value.length, 'characters');
    }
});

Automatisches Speichern des Entwurfs mit localStorage

Verwenden Sie onChange, um bei jedem Tastendruck einen Entwurf zu speichern. Stellen Sie es wieder her, indem Sie den Textbereich vorab ausfüllen, bevor Sie den Editor initialisieren.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

const DRAFT_KEY = 'my-page-draft';

// Restore saved draft before init (only if textarea starts empty)
const textarea = document.getElementById('markdown-editor');
const saved = localStorage.getItem(DRAFT_KEY);
if (saved && !textarea.value) textarea.value = saved;

// Save on every change
const editor = new MarkdownEditor('#markdown-editor', {
    onChange(value) {
        localStorage.setItem(DRAFT_KEY, value);
    }
});

// Clear draft after successful form submission
document.querySelector('form').addEventListener('submit', () => {
    localStorage.removeItem(DRAFT_KEY);
});

Formularübermittlung

Da MarkdownEditor direkt auf dem nativen <textarea> aufbaut, ist er sofort mit jedem Backend-Framework (Django, Laravel, PHP, Ruby on Rails usw.) kompatibel.

Hier kommt die „Native-First“-Philosophie zum Tragen. Sie müssen die Daten vor dem Absenden eines Formulars nicht manuell synchronisieren. Der Browser behandelt den Editor genau wie ein Standard-Eingabefeld.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

<form method="POST" action="/api/submit">
  <textarea id="markdown-editor" name="content" class="h-48" rows="5">
    # Initial Content
  </textarea>

  <button type="submit">Submit to Server</button>
</form>

<script>
  // Just initialize it. That's it.
  new MarkdownEditor('#markdown-editor');
</script>

Hinweis: Die Initialisierung des MarkdownEditor-Plugins ist erforderlich

Verwenden Sie einfach ein Standard-HTML-<form>. Das Attribut name im Textbereich wird von Ihrem Server zur Identifizierung des Inhalts verwendet.

🚀 Warum es ein Game-Changer für Backends ist

Da der Editor das native Verhalten von <textarea> beibehält, verarbeitet Ihr Server die Daten als Standardzeichenfolge. Es ist keine zusätzliche Logik erforderlich – kein preventDefault() und keine manuelle FormData-Konstruktion.

💡 Warum dies ein „Killer-Feature“ ist:

Die meisten Editoren (wie Quill, Editor.js, simpleMDE, easyMDE) speichern Daten in komplexen JSON-Strukturen. Wenn ein Entwickler diese verwendet, muss er sein Datenbankschema und seine Rendering-Logik neu schreiben.

Mit MarkdownEditor kann ein Entwickler eine alte Website übernehmen und einen einfachen <textarea> durch Ihren Editor ersetzen, und das Backend merkt nicht einmal, dass sich etwas geändert hat. Es erhält einfach den gleichen Rohtext wie immer, aber der Benutzer erhält ein zehnmal besseres Erlebnis.

🖼️ Erweiterter Bild-Upload

Die native Handhabung von Bild-Uploads – anstatt sich auf langsame, speicherintensive Base64-Strings zu verlassen – ist ein erheblicher Gewinn sowohl für die Leistung als auch für die Suchmaschinenoptimierung.

Konfigurationsoptionen

Das Image-Tool unterstützt eine fileInput-Konfiguration zur Verarbeitung direkter Server-Uploads.

• accept: Definieren Sie ein Array zulässiger Bildformate (z. B. „webp“, „avif“).
• uploadUrl: Geben Sie den Backend-Endpunkt an, an den das File-Objekt per POST gesendet wird
• params: Optionales Objekt zum Senden zusätzlicher Daten (wie CSRF-Tokens, Benutzer-IDs oder Ordnernamen) neben der Bilddatei

Anwendungsbeispiel (Vollständige Konfiguration)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

const options = {
  placeholder: 'Start writing...',
  toolbar: [
    'link',
    {
      image: {
        fileInput: {
            accept: ['webp', 'avif'], // restrict the image upload format
            uploadUrl: '/api/upload', // Your upload endpoint
            params: {
                _token: 'your_csrf_token_here', // Essential for Laravel/Django
                folder: 'blog_posts'
            }
        },
        // Supports boolean: true/false OR object: { required: true }
        altInput: { required: true }
      }
    },
    'preview'
  ],
}
const editor = new MarkdownEditor('#markdown-editor', options);

📡 Serverintegration

Die Anfrage

Der Editor sendet eine POST-Anfrage als multipart/form-data. Standardmäßig umfasst es:

• image_file: Das eigentliche Dateiobjekt
• image_alt: Der vom Benutzer eingegebene Alternativtext
• ...plus alle benutzerdefinierten Daten, die im params-Objekt definiert sind

Die erforderliche Antwort

Um einen erfolgreichen Upload zu bestätigen und das Bild in den Editor einzufügen, muss Ihr Server die folgende JSON-Struktur zurückgeben:

1
2
3
4

{
  "success": true,
  "image_path": "https://cdn.yourdomain.com/uploads/image.webp"
}

Hinweis: Stellen Sie sicher, dass Sie den Schlüssel image_path für die URL des hochgeladenen Bildes verwenden.

Bild-Alt-Text-Validierung (altInput)

Um sicherzustellen, dass Ihre Inhalte zugänglich und SEO-freundlich bleiben, erzwingt MarkdownEditor standardmäßig die Alt-Text-Validierung.

• Standardverhalten: Wenn altInput nicht definiert ist, wird standardmäßig { erforderlich: true verwendet
• Barrierefreiheit erzwingen: Benutzer können kein Bild einfügen, bis eine Alternativbeschreibung bereitgestellt wird

1. Standard (keine Konfiguration erforderlich)

1
2
3
4

// Alt text is REQUIRED by default
image: {
  fileInput: { uploadUrl: '/api/upload' }
}

2. Abkürzung (Validierung deaktivieren)

Wenn Sie Bilder ohne Beschreibung zulassen möchten, setzen Sie einfach den booleschen Wert auf false.

1
2
3

image: {
  altInput: false // Users can now skip the alt text field
}

3. Objektbasiert (explizit)

1
2
3
4
5

image: {
    altInput: {
        required: false // Disables alt text validation — users can skip the alt field
    }
}

Standardbildnutzung (kein fileInput)

Wenn fileInput nicht konfiguriert ist, verwendet der Editor standardmäßig ein einfaches URL-basiertes Modal. Dies ist ideal, wenn Ihre Benutzer hauptsächlich auf externe Image-Hosts verlinken.

1
2
3
4
5
6
7
8

const options = {
  toolbar: [
    'link',
    'image',
    'preview'
  ],
}
const editor = new MarkdownEditor('#markdown-editor', options);

💡 Warum Parameter verwenden?

In Frameworks wie Laravel oder Django können Sie keine Dateien ohne CSRF-Token hochladen. Durch das Hinzufügen von _token zum params-Objekt wird Ihre Anfrage nahtlos durch die Sicherheits-Middleware des Backends geleitet und behält so die „Zero Logic“-Philosophie für Ihre serverseitigen Controller bei.

⌨️ Tastaturkürzel

Gängige Formatierungsaktionen können direkt über die Tastatur ausgelöst werden, ohne die Symbolleiste zu berühren. Jede Verknüpfung wird auch im Tooltip der entsprechenden Symbolleistenschaltfläche angezeigt.

🔍 Finden & Ersetzen

Im Editor ist ein integriertes Such- und Ersetzungsfeld verfügbar – keine Browsererweiterung oder separates Tool erforderlich.

• Drücken Sie Strg + F (oder ⌘ F), um das Feld Suchen zu öffnen
• Drücken Sie Strg + H (oder ⌘ H), um das Suchen & Ersetzen Sie das Panel
• Die Suche berücksichtigt Groß- und Kleinschreibung und zeigt einen Live-Match-Zähler an (z. B. 3 von 12).
• Navigieren Sie durch Übereinstimmungen mit den Tasten ▲ / ▼ oder Eingabetaste / Umschalt + Eingabetaste
• Ersetzen ersetzt die aktuell hervorgehobene Übereinstimmung; Alle ersetzen ersetzt jedes Vorkommen auf einmal
• Drücken Sie Escape, um das Bedienfeld zu schließen und den Fokus wieder auf den Editor zu richten

Das Bedienfeld verschiebt sich in der oberen rechten Ecke des Editor-Inhaltsbereichs und unterbricht den Schreibvorgang nicht.

Merkmale

Vollständiges Konfigurationsbeispiel

Verwenden Sie dieses umfassende Beispiel, um MarkdownEditor mit allen Hauptfunktionen zu initialisieren, einschließlich der benutzerdefinierten Symbolleistenreihenfolge und der erweiterten Handhabung des Bild-Uploads.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

const editor = new MarkdownEditor('#markdown-editor', {
    mode: 'hybrid',
    placeholder: 'Start writing...',
    footer: {
        line: true,
        col: true,
        chars: true,
        words: true,
    },
    onChange(value) {
        console.log('Content updated:', value.length, 'characters');
    },
    toolbar: [
        'heading', 'bold', 'italic', 'strikethrough', 'blockquote',
        'ul', 'ol', 'checklist',
        'code', 'codeblock', 'hr', 'table',
        {
            image: {
                fileInput: {
                    accept: ['webp', 'avif', 'png'],
                    uploadUrl: '/api/upload'
                }
            }
        },
        'link', 'undo', 'redo', 'indent', 'outdent', 'preview'
    ],
});

// Read content natively
const markdown = document.getElementById('markdown-editor').value;

// destroy() when the view unmounts (SPAs)
// editor.destroy();