Ukuran huruf
Ubah teks yang dipilih ke suatu langkah ukuran. Jika rentang dipilih, langkah berlaku untuk rentang itu; jika hanya ada kursor, ukuran teks paragraf saat ini diubah. Data tersimpan hanya memuat langkah yang diizinkan, bukan nilai bebas seperti px.
Sayap
Jenis huruf bawaanJarak
HTMLMemuat editor…
JSONnabi-treeMemuat editor…
Pasang
npm install nabi-noteKode
import {
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: 'id' })
const settle = watchSettle(document, { surface: content })
const shared = { nabi, registry, surface: content, settle, locale: 'id' }
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('fs', {
values: ['sm', 'lg', 'xl'],
}).build()Jika values dihilangkan, langkah xs, sm, lg, dan xl digunakan. Jika daftar dipersempit, langkah lain yang sudah ada dalam dokumen lama dihapus ketika dimuat.
Gaya CSS
Ukuran dapat diubah melalui pemilih langkah tersimpan seperti .nabi-content [data-nabi-size="xs"]. Jangan membuat langkah bebas yang tidak ada di dokumen; sesuaikan CSS hanya dalam values yang terdaftar.
css
.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; }Menjaga perbedaan ukuran antarlangkah tetap konsisten mempertahankan maksud yang dipilih penulis di editor ketika dokumen diterbitkan.