NABI NOTE
Tài liệu

Liên kết ​

Chọn chữ để gắn địa chỉ. Nhập địa chỉ khi không chọn gì thì chính địa chỉ đó trở thành chữ liên kết; nhập địa chỉ http:// hoặc https:// rồi nhấn Space hoặc Enter cũng chuyển thành liên kết.

Liên kết chỉ lưu địa chỉ http:, https: và đường dẫn cùng trang bắt đầu bằng . hoặc /. Các địa chỉ không xác định được nguồn rõ ràng như javascript: hoặc //example.com bị từ chối. Liên kết tệp đính kèm do tải lên tạo ra còn lưu thông tin tệp và không thể tạo trực tiếp như liên kết thường.

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-note
Mã
import {
  createNabiWith, mountSurface, mountToolbar, mountContextToolbar,
  mountHints, watchSettle, subscriptWing, highlightWing, linkWing,
  mountViewTools,
} from 'nabi-note'

const selected = [
  subscriptWing,
  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: '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('a').build()

Kiểu CSS ​

Bạn có thể tạo kiểu riêng cho liên kết thường bằng .nabi-content a, và liên kết tệp đính kèm bằng .nabi-content a[data-nabi-file].

css
.article-body a:not([data-nabi-file]) {
  color: var(--nabi-accent);
  text-decoration-thickness: .08em;
  text-underline-offset: .16em;
}

.article-body a[data-nabi-file] {
  display: inline-flex;
  gap: .35em;
  padding: .25em .55em;
  background: var(--nabi-soft);
}

::before và ::after của liên kết tệp đính kèm được dùng để hiển thị biểu tượng tệp và phần mở rộng, vì vậy tốt nhất không thay đổi hoặc xóa content.