NABI NOTE
ドキュメント

脚注 ​

本文の番号と文末の一覧で補足説明を結び付けます。

ツールバーの脚注ボタンで内容を入力すると、カーソル位置に脚注が入ります。文字を選択している場合は、選択した文字を残して選択範囲の末尾に挿入します。番号は保存せず、文書内の順序に従って自動的に付けます。

本文の番号を押すと、プロパティ行で内容を編集できます。削除ツールを使うか、脚注の隣で Backspace または Delete を2回押して、選択してから削除します。下部の一覧は読み取り専用で、脚注がなくなると消えます。

プレビューと viewer を接続した公開ページでは、番号にマウスを重ねるか、クリック・タップすると内容を確認できます。内容は1行のプレーンテキストのみで、本文の基本サイズの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('ja')
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()