Schriftgröße
Ändern Sie den ausgewählten Text in einen Schritt. Wenn ein Bereich ausgewählt ist, gilt der Schritt für diesen Bereich; wenn nur ein Cursor vorhanden ist, wird die Textgröße des aktuellen Absatzes geändert. Gespeicherte Daten enthalten nur zulässige Schritte, keine beliebigen Werte wie px.
npm install nabi-noteimport {
createNabiWith, mountSurface, mountToolbar, mountContextToolbar,
mountHints, watchSettle, boldWing, italicWing, underlineWing,
strikeWing, typefaceWing, fontSizeWing, clearFormatWing,
mountViewTools,
} from 'nabi-note'
const selected = [
boldWing,
italicWing,
underlineWing,
strikeWing,
typefaceWing,
fontSizeWing,
clearFormatWing,
]
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()))const selected = wings().use('fs', {
values: ['sm', 'lg', 'xl'],
}).build()Wenn values weggelassen wird, werden die Schritte xs, sm, lg und xl verwendet. Wenn Sie die Liste eingrenzen, werden andere Schritte, die bereits in älteren Dokumenten vorhanden sind, beim Laden entfernt.
CSS-Stile
Sie können Größen über gespeicherte-Schritt-Selektoren wie .nabi-content [data-nabi-size="xs"] ändern. Erfinden Sie keine beliebigen Schritte, die nicht im Dokument enthalten sind; passen Sie CSS nur innerhalb registrierter values an.
.article-body [data-nabi-size="xs"] { font-size: .78em; }
.article-body [data-nabi-size="sm"] { font-size: .9em; }
.article-body [data-nabi-size="lg"] { font-size: 1.3em; }
.article-body [data-nabi-size="xl"] { font-size: 1.65em; }Das Beibehalten des Größenunterschieds zwischen den Schritten bewahrt die Bedeutung, die der Autor im Editor gewählt hat, wenn das Dokument veröffentlicht wird.