Aufgabenliste

Eine Liste mit Abschlussstatus. Geben Sie [ ] oder [x] gefolgt von einem Leerzeichen in einem leeren Absatz ein, oder erstellen Sie einen über die Symbolleiste, und klicken Sie dann auf das Kontrollkästchen, um seinen Status zu ändern.

Der geprüfte Zustand wird mit jedem Element im Dokument gespeichert. Wenn ein Element geteilt wird, folgt der geprüfte Zustand dem Element, das den Text behält, nicht dem leeren Element davor, sodass das Teilen einer abgeschlossenen Aufgabe den Status nicht unerwartet umkehrt.

Flügel
StandardschriftartAbstand
HTMLEditor wird geladen…
JSONnabi-treeEditor wird geladen…
Installation
npm install nabi-note
Code
import {
  createNabiWith, mountSurface, mountToolbar, mountContextToolbar,
  mountHints, watchSettle, orderedListWing, taskListWing, tableWings,
  mountViewTools,
} from 'nabi-note'

const selected = [
  orderedListWing,
  taskListWing,
  ...tableWings,
]
const { nabi, registry } = createNabiWith(selected)

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

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

const settle = watchSettle(document, { surface: content })
const shared = { nabi, registry, surface: content, settle, locale: 'de' }
const toolbar = mountToolbar({ ...shared, root: document.querySelector('#toolbar')! })
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()))
ts
const selected = wings().use('tl').build()