NABI NOTE
Dokumentation

Hervorhebung ​

Wende eine Hervorhebungsfarbe hinter dem ausgewählten Text an. Gespeicherte Daten enthalten nur erlaubte Farbnamen statt beliebiger CSS-Farbwerte, sodass die Dokumentdaten und der visuelle Stil getrennt bleiben.

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

const selected = [
  textColorWing,
  highlightWing,
  linkWing,
]
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('hl', {
  values: ['yellow', 'green', 'cyan'],
}).build()

Wenn values weggelassen wird, ist die Standardpalette yellow, green, cyan, pink, purple und orange. Wenn Sie die Liste einschränken, werden nicht registrierte Farben nicht beibehalten, selbst wenn ein bestehendes Dokument geladen wird.

CSS-Stile ​

Das Dokument speichert nur Farbnamen. Ändere die Farben des Editors und der veröffentlichten Ansicht über CSS-Variablen.

css
.nabi-content { --nabi-hl-yellow: #fff0a6; }

Das gleichzeitige Ändern mehrerer Farben ermöglicht es dir, die Farbnamen des Dokuments beizubehalten und nur die Produktstimmung anzupassen.

css
.article-body {
  --nabi-hl-yellow: #fff0a6;
  --nabi-hl-green: #c8f0d8;
  --nabi-hl-pink: #ffd6e5;
}