Cỡ chữ
Thay đổi mức cỡ chữ đã chọn. Khi chọn một phạm vi, nó áp dụng cho phạm vi đó; khi chỉ có con trỏ, nó thay đổi cỡ chữ của đoạn hiện tại. Dữ liệu lưu chỉ giữ các mức được cho phép, không giữ giá trị tùy ý như px.
Wings
Kiểu chữ cơ sởĐộ lệch
HTMLĐang tải trình soạn thảo…
JSONnabi-treeĐang tải trình soạn thảo…
Cài đặt
npm install nabi-noteMã
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: 'vi' })
const settle = watchSettle(document, { surface: content })
const shared = { nabi, registry, surface: content, settle, locale: 'vi' }
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()Nếu bỏ qua values, các mức xs, sm, lg, xl được dùng. Khi thu hẹp danh sách, các mức khác có trong tài liệu cũ cũng bị xóa khi tải.
Kiểu CSS
Bạn có thể thay đổi cỡ bằng bộ chọn mức đã lưu như .nabi-content [data-nabi-size="xs"]. Không tạo mức tùy ý không có trong tài liệu; chỉ điều chỉnh CSS trong values đã đăng ký.
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; }Giữ chênh lệch cỡ giữa các mức nhất quán để ý nghĩa tác giả chọn trong trình soạn thảo vẫn được duy trì trên trang xuất bản.