حاشية سفلية ​

اربط الشروح الإضافية بأرقام داخل النص وقائمة في نهاية المستند.

أدخل المحتوى باستخدام زر الحاشية في شريط الأدوات لإدراج حاشية عند المؤشر. عند تحديد نص، تُدرج الحاشية في نهاية التحديد مع إبقاء النص المحدد. لا تُخزّن الأرقام، بل تُعيّن تلقائيًا حسب ترتيب المستند.

اضغط على رقم في النص لتحرير محتواه في صف الخصائص. استخدم أداة الحذف، أو اضغط Backspace أو Delete مرتين بجوار الحاشية لتحديدها ثم حذفها. القائمة السفلية للقراءة فقط وتختفي عند عدم وجود حواشٍ.

في المعاينة والصفحات المنشورة المتصلة بـ viewer، مرّر المؤشر فوق الرقم أو انقر عليه أو المسه لقراءة المحتوى. يُقبل سطر واحد من النص العادي، ويُعرض بخط sans-serif بحجم يساوي 0.875 من الحجم الأساسي للنص. تُعرض HTML كنص حرفي.

الأجنحة
نوع الخط الافتراضيالارتفاع
HTMLجارٍ تحميل المحرّر…
JSONnabi-treeجارٍ تحميل المحرّر…
التثبيت
npm install nabi-note
الشيفرة
import {
  createLocale, createNabiWith, mountSurface, mountToolbar,
  mountContextToolbar, mountHints, watchSettle, highlightWing, linkWing,
  footnoteWing, mountViewTools,
} from 'nabi-note'

const selected = [
  highlightWing,
  linkWing,
  footnoteWing,
]
const locale = createLocale('ar')
const { nabi, registry } = createNabiWith(selected, { locale })

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 })

const settle = watchSettle(document, { surface: content })
const shared = { nabi, registry, surface: content, settle, locale }
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()))

// Call from your language selector. Content and editing history stay intact.
// locale.setLocale('ko')
ts
const selected = wings().use('fn').build()