Werkzeugleiste fixieren Ausgleich der mobilen TastaturStandardschriftartAbstand

NABI NOTE

Ein Open-Source-WYSIWYG-Editor

NABI NOTE ist ein Open-Source-WYSIWYG-Editor, dessen Formatierung, Ausrichtung, Tabellen, Uploads und weitere Funktionen vom Kern getrennt als eigenständige Module namens wings leben. Sie können nur die benötigten wings auswählen, um einen Editor zusammenzustellen, und selbst gebaute wings anbinden. Er ist in reinem JavaScript geschrieben und kann deshalb in Frameworks wie React oder Vue verwendet werden. Auf Seiten ohne Build-Einrichtung können Sie sofort mit der CDN-Bibliothek starten. Das eigene Dokumentformat, NABI TREE, lässt sich auch in Node.js-Umgebungen ohne Browser-DOM in HTML umwandeln. Eingabedokumente werden über registrierte Regeln repariert; beim Erzeugen von HTML werden Text und Attribute escapet und Link-Adressen geprüft. Eigene wings und Daten vom Server müssen dennoch zusätzlich nach der Sicherheitsrichtlinie der Anwendung geprüft werden. CSS-Variablen und ein rem-basiertes Layout helfen dabei, Theme und Größe anzupassen; außerdem gibt es Dark Mode und Schriftfamilien-Einstellungen für mehrere Sprachen. Tabellensortierung, lokale Historie und KI-gestützte Dokumentarbeit laufen alle auf demselben Dokumentmodell weiter.

Schriftart

Für serifenlose Schriften (Standard), Serifenschriften, Monospace und Schreibschriften stehen sprachspezifische Ersatzschriften bereit. Ist für die gewählte Schriftfamilie keine passende Schrift verfügbar, wird die Standardschrift des Browsers verwendet. Die einbettende Seite legt die Standardschrift des Editors fest.

Unten wird jede Familie in vielen Sprachen gezeigt.

산세리프 · ゴシック体 · 无衬线 · Serifenlos · Sans empattement · Sin serifa · Sem serifa · Без засечек · بلا زخارف · सैन्स सेरिफ़ · স্যান্স সেরিফ · سانس سیرف · Tanpa serif · بدون سریف · सॅन्स सेरिफ · Không chân · శాన్స్ సెరిఫ్ · Mara seref · Sans serif · Bila serif · சான்ஸ் செரிஃப் · ไร้เชิง · Senza grazie

세리프 · 明朝体 · 衬线 · Serif · Avec empattement · Con serifa · Com serifa · С засечками · بزخارف · सेरिफ़ · সেরিফ · سیرف · Berserif · سریف · सेरिफ · Có chân · సెరిఫ్ · Mai seref · Yenye serif · செரிஃப் · มีเชิง · Con grazie

고정폭 · 等幅 · 等宽 · Dicktengleich · Chasse fixe · Monoespaciada · Monoespaçada · Моноширинный · ثابت العرض · मोनोस्पेस · মনোস্পেস · یکساں چوڑائی · Lebar tetap · تک‌فاصله · Đơn cách · మోనోస్పేస్ · Tazara ɗaya · Eş aralıklı · Nafasi moja · ஒற்றையகலம் · ความกว้างคงที่ · Monospaziato · Monospace

필기체 · 筆記体 · 手写体 · Schreibschrift · Cursive · Cursiva · Рукописный · خط اليد · हस्तलिपि · হস্তলিপি · رواں خط · Tulisan tangan · دست‌نویس · हस्ताक्षर · Chữ viết tay · చేతిరాత · Rubutun hannu · El yazısı · Mwandiko · கையெழுத்து · ลายมือ · Corsivo

Textgröße

Sehr klein

Klein

Groß

Sehr groß

Überschrift

Tippen Sie in einer leeren Zeile # und danach ein Leerzeichen, um sie direkt in eine Überschrift zu verwandeln.

H1

H2

H3

H4

H5

H6

Fett · Kursiv · Unterstrichen · Durchgestrichen

Fett kursiv unterstrichen ~~durchgestrichen~~ lassen sich gemeinsam auf dasselbe Zeichen anwenden.

~~Sie können auch übereinandergelegt werden.~~

Hoch- und Tiefstellung

Die Fläche beträgt 3,5 m², und eine Fußnote wird so hinzugefügt.¹

Wasser ist H₂O.

Textfarbe · Hervorhebung

Die Palette ist so gewählt, dass sie in hellem und dunklem Modus lesbar bleibt.

Textfarbe Grün · Koralle · Violett · Bernstein · Blau

Hervorhebung Gelb · Grün · Cyan · Pink · Lila · Orange

Link

Geben Sie eine Adresse ein, dann wird daraus ein Link.

Sie können http://- und https://-URLs sowie Pfade auf derselben Website verwenden, die mit . oder / beginnen. Adressen wie javascript: sind nicht erlaubt.

Tippen Sie zum Beispiel https://nabi.saro.me und drücken Sie Leerzeichen oder Enter — wie hier zu sehen, wird es automatisch umgewandelt.

Links öffnen

Das Dokument speichert nur die Link-Adresse; die Seite, die das Dokument anzeigt, entscheidet, wie Links geöffnet werden.

Anhang-Link

Dateien, die keine Bilder sind, bleiben als Anhangslinks wie im folgenden Beispiel erhalten.

Anhang-Links werden im Dokument gespeichert.

Ausrichtung

Linksbündig

Zentriert

Rechtsbündig

Auf Überschriften lässt sich keine Ausrichtung anwenden.

Listen

Aufzählung

Tippen Sie in einer leeren Zeile - und drücken Sie Leerzeichen — daraus wird direkt eine Aufzählung.

Das ist ein Aufzählungspunkt
- Tab / Umschalt+Tab rücken ein und aus.

Nummerierte Liste

Tippen Sie in einer leeren Zeile 1. und drücken Sie Leerzeichen, um eine nummerierte Liste zu erstellen.

Erstens
Zweitens
Drittens

Checkliste

Tippen Sie in einer leeren Zeile [ ] oder [x] und drücken Sie Leerzeichen, um eine Checkliste zu erstellen.

Dieser Punkt ist erledigt.
Dieser Punkt ist noch offen.

Tabelle

Zellen können mehrere Absätze und Blöcke enthalten. Hintergrundfarben helfen, Inhalte zu unterscheiden. Bearbeiten Sie Text und Bilder in der folgenden Tabelle direkt.

Material	Arbeitsnotizen
Bild und Beschreibung stehen in derselben Zelle.	Absätze frei gestalten Mit Enter beginnen Sie einen neuen Absatz, mit Shift+Enter eine neue Zeile im selben Absatz.
Zellhintergrund ändern Listen mit Tab einrücken Mehrere Zellen auswählen und gleich einfärben	Für Bearbeitungstipps anklicken Zellen können auch aufklappbare Bereiche, Zitate, Code und Videos enthalten. Beim Verbinden von Zellen bleiben ihre Inhalte in der ursprünglichen Reihenfolge erhalten.

Material

Arbeitsnotizen

Bild und Beschreibung stehen in derselben Zelle.

Absätze frei gestalten

Mit Enter beginnen Sie einen neuen Absatz, mit Shift+Enter eine neue Zeile im selben Absatz.

Zellhintergrund ändern
Listen mit Tab einrücken
Mehrere Zellen auswählen und gleich einfärben

Für Bearbeitungstipps anklicken

Zellen können auch aufklappbare Bereiche, Zitate, Code und Videos enthalten.

Beim Verbinden von Zellen bleiben ihre Inhalte in der ursprünglichen Reihenfolge erhalten.

Klicken Sie in eine Zelle, um Hintergrundfarbe sowie Zeilen- und Spaltenwerkzeuge anzuzeigen. Bei mehreren ausgewählten Zellen lassen sich Farbe und Ausrichtung gemeinsam ändern. Für die Position der gesamten Tabelle wählen Sie „Tabelle auswählen“ und anschließend ein Ausrichtungswerkzeug.

Tabellen mit Farben oder mehreren Blöcken bleiben auch beim Speichern als Markdown als HTML erhalten.

Zellhintergrundfarben

Hier sehen Sie alle unterstützten Zellhintergründe. Klicken Sie in eine Zelle, um ihre Farbe zu ändern, oder wählen Sie in den Eigenschaften „Standard“, um den Hintergrund zu entfernen.

Gelb

yellow

Grün

green

Hellblau

cyan

Rosa

pink

Lila

purple

Orange

orange

Spalten sortieren

Öffnen Sie zuerst die Vorschau und klicken Sie dann nacheinander auf die Kopfzellen Bestand und Preis.

Modell	Bestand	Preis	Gewicht
NB-7	1,200	349	1.2 kg
NB-9	20,000	99	0.9 kg
NB-12	3,500	1,299	1.4 kg
NB-80	900	8,900	2.1 kg
NB-100	Offen	12,999	2.4 kg

Preis enthält ausschließlich Zahlenwerte; die Spalte wird deshalb numerisch sortiert.

Bestand enthält Zahlen und Text; die Spalte wird deshalb nach Zeichenfolgen sortiert.

Trennlinie

Tippen Sie --- und drücken Sie Enter, um daraus eine Trennlinie zu machen.

Bild

Die Breite reicht von 30 % bis 100 %, und das Bild kann links, zentriert oder rechts stehen.

Float-Bereich

Auf einen Blick

Ein kleiner ergänzender Bereich für Text, Bilder und Tabellen.

Platzierung	Rechts
Maximale Breite	40%

Ein Float-Bereich eignet sich für zusätzliche Erklärungen oder kleine Materialien neben dem Haupttext. Bei breitem Textbereich fließt dieser Text daneben. Klicken Sie hinein, um im selben Editor Text zu bearbeiten und Bilder oder Tabellen einzufügen.

Setzen Sie den Cursor in den Bereich, um die Eigenschaften zu öffnen. Wechseln Sie zwischen links und rechts und wählen Sie eine maximale Breite von 20, 30, 40 oder 50%, passend zum Text. Eingefügte Tabellen und Bilder bleiben ebenfalls im Bereich.

Auch ausgewählte Absätze lassen sich in einen Bereich einschließen. Die Schaltfläche zum Auflösen neben der Breite lässt den Inhalt im Haupttext stehen. Die Vorschau blendet die gestrichelte Bearbeitungslinie aus; bei schmalem Textbereich und im Druck wird alles einspaltig angeordnet.

YouTube

Upload

Ziehen Sie ein Bild oder eine Datei in den Editor.

Diese Demo sendet keine Dateien an einen echten Server. Verbinden Sie in Ihrer Anwendung einen Uploader, um Dateien auf einem Server zu speichern.

Wenn Sie nach dem Öffnen der Bildauswahl oder dem Start eines Uploads nur den Cursor bewegen, wird weiterhin an der ursprünglichen Stelle eingefügt. Bearbeiten Sie während des Wartens das Dokument, wird das Einfügen abgebrochen und ein Hinweis angezeigt. Fortschritt und Ergebnis eines in einer Zelle gestarteten Uploads bleiben in dieser Zelle.

Zitat

Tippen Sie in einer leeren Zeile > und drücken Sie Leerzeichen, um einen Zitatblock zu erstellen.
Er kann über mehrere Zeilen laufen.

Code

Tippen Sie in einer leeren Zeile ``` und drücken Sie Leerzeichen oder Enter, um einen Codeblock zu erstellen.

Schreiben Sie auch die Sprache dazu, etwa ```java, und drücken Sie Leerzeichen oder Enter, um einen Codeblock mit dieser Sprache zu erhalten.

import { createNabiWith, defaultWings } from 'nabi-note'

const { nabi } = createNabiWith(defaultWings)
const html = nabi.getHtml()

Details

Details besteht aus Zusammenfassung und Inhalt.

Sie können festlegen, ob es eingeklappt oder geöffnet gespeichert wird.

Werkzeugleiste

Werkzeuge für Überschriften, Textformatierung, Ausrichtung, Listen, Einfügen und Dokumente sind gruppiert. Am Desktop sind sie aufgeklappt; mobil stehen Schnellwerkzeuge und die vollständige Palette bereit. Eigenschaften der ausgewählten Tabelle oder des Float-Bereichs erscheinen darunter.

Tastenkürzel

Drücken Sie Shift zweimal schnell, um Werkzeuge mit der Tastatur zu wählen. Am Desktop navigieren Sie in der aufgeklappten Werkzeugleiste, mobil in der vollständigen Palette. Wechseln Sie mit Tab die Gruppe, wählen Sie mit den Pfeiltasten ein Werkzeug und führen Sie es mit Enter aus.

Drücken Sie am Ende eines Blocks wie Zitat, Code oder aufklappbarem Bereich zweimal schnell Enter, um ihn zu verlassen. Das Standardintervall beträgt 180ms.

Autoformat

Beispiel	Auslösetaste	Ergebnis
#	Leerzeichen	Überschrift
-	Leerzeichen	Aufzählung
1.	Leerzeichen	Nummerierte Liste
[ ] · [x]	Leerzeichen	Checkliste
>	Leerzeichen	Zitat
``` · ```ts	Leerzeichen · Enter	Codeblock
---	Enter	Trennlinie
https://…	Leerzeichen · Enter	Link

Ausgabefunktionen

Funktion	Ergebnis
getHtml()	HTML
getJson()	JSON

Funktioniert ohne DOM

Die Umwandlung von NABI TREE nach HTML braucht kein DOM.

Auch ein Server (Node.js) kann den gespeicherten NABI TREE lesen und nach denselben Regeln HTML erzeugen.

Mobilfreundlich

Mobile UI — Ordnet die Bearbeitungswerkzeuge passend zur Bildschirmbreite an.
Anpassung an die mobile Tastatur — Passt die Höhe der Bearbeitungsansicht an, wenn sich die Tastatur öffnet.
Flexible Größen — Verwendet rem-Einheiten für das Hauptlayout, um Vergrößern und Verkleinern zu unterstützen.
Mehrsprachigkeit — Locale und Schriftfamilie lassen sich passend zur Sprache und Schreibrichtung einstellen.

Anpassung

Eigener wing — benötigte Funktionen können Sie selbst entwickeln und einbinden.
Eigenes CSS — die wichtigsten Farben, Ecken und Abstände lassen sich mit --nabi-*-Tokens an den hellen und dunklen Modus anpassen.
Open Source — der Quellcode wird auf GitHub veröffentlicht und gemeinsam weiterentwickelt.

Dokumentation lesen → nabi.saro.me

HTMLEditor wird geladen…

JSONnabi-treeEditor wird geladen…

Installation

npm install nabi-note

Code

import {
  createLocale, createNabiWith, mountSurface, mountToolbar,
  mountContextToolbar, mountHints, watchSettle, makeTranslator,
  defaultWings, mountUpload, mountUploadView, browserFileStore,
  mountFile, mountViewTools, browserHistoryStorage, mountLocalHistory,
  openHistoryPanel,
} from 'nabi-note'
import { mountDiffWing } from 'nabi-note/diff'
import { mountOutline } from 'nabi-note/viewer'

// The box that asks — without it the core answers "no" to everything (plug in your own)
const ask = { message: (t: string) => alert(t), confirm: (t: string) => confirm(t) }

const selected = [
  ...defaultWings,
]
const locale = createLocale('de')
const { nabi, registry } = createNabiWith(selected, { ask, locale })

// Bring your own highlighter (Prism, highlight.js, Shiki, …) — the wing stays as it is
// and only the attach is swapped (`makeCodeAttach` ships from the same door)
// { ...codeWing, attach: makeCodeAttach({ highlight: (source, lang) => [{ text: source }] }) }

const root = document.querySelector('.nabi')!
const content = document.querySelector('.nabi-content')!

const view = mountUploadView({ nabi, surface: content, locale })
const upload = mountUpload({
  nabi, root: content, locale,
  // your upload goes here — report progress with task.onProgress(0–100)
  uploader: async (task) => ({ uri: 'https://cdn.example/uploaded' }),
  extensions: ['png', 'jpg', 'pdf'], maxFileSize: 10 * 1024 * 1024,
  onStart: (tasks) => view.start(tasks),
  onProgress: (id, percent) => view.progress(id, percent),
  onSettle: () => view.settle(),
  onDone: () => view.done(),
})
const file = mountFile({ nabi, registry, store: browserFileStore(document), locale, name: () => 'note' })
const history = mountLocalHistory({ nabi, storage: browserHistoryStorage(window) })
const diff = mountDiffWing({ nabi, registry, surface: content, locale })

// The locale also sets the direction — Arabic and Urdu run right to left
mountSurface({ nabi, registry, root: content, locale, fileSink: upload.take })

const trigger = document.createElement('button')
trigger.type = 'button'
trigger.textContent = makeTranslator(locale).t('outline')
trigger.style.cssText = 'position:fixed;right:1rem;bottom:1rem;z-index:1000'
root.append(trigger)
const outline = mountOutline(content, {
  trigger, locale,
  scrollContainer: () => root.classList.contains('is-fullscreen') ? root : window,
  onChange: ({ items, activeIndex, available, open }) => {
    trigger.hidden = !available
    trigger.setAttribute("aria-expanded", String(open))
  },
})
trigger.onclick = () => outline.toggle()
// Call outline.unmount() when removing the editor

const settle = watchSettle(document, { surface: content })
const shared = { nabi, registry, surface: content, settle, locale }
// A tool that needs a panel comes back to the host — without this the button is dead
const toolbar = mountToolbar({
  ...shared, root: document.querySelector('#toolbar')!,
  file,
  onFiles: upload.take,
  onHost: (w) => {
    if (w === 'diff') { diff.open(); return }
    if (w !== 'localHistory') return
    openHistoryPanel({
      history, surface: content, locale, sessionId: history.sessionId,
      render: (record) => createNabiWith(selected, { doc: JSON.parse(record.body) }).nabi.getHtml(),
    })
  },
})
const context = mountContextToolbar({ ...shared, root: document.querySelector('#context')! })
mountHints({ toolbar, context, root, surface: content })
// The preview and fullscreen buttons — they stand their own box at the end of the row
mountViewTools({ ...shared, root, container: document.querySelector('#toolbar')! })

// on every change — hook up your own code here
// nabi.onChange(() => user_callback(nabi.getHtml()))

// Call from your language selector. Content and editing history stay intact.
// locale.setLocale('ko')