ドキュメント

画像

画像アドレスを入れ、幅と配置を調整します。既定では http:、https:、または同じサイト内のパスだけを許可し、新しい画像は中央揃え、幅 60% から始まります。

幅は決められた段階の中だけで保存され、配置は画像を包む段落に保存されます。blob: や data:image/... のプレビューを使うには、画像 wing とエディターの組み立て側の両方でローカル URL を明示的に許可する必要があります。SVG の data URL は許可されません。

ツールバー固定モバイルキーボード補正既定の書体高さ

HTMLエディタを読み込んでいます…

JSONnabi-treeエディタを読み込んでいます…

インストール

npm install nabi-note

コード

import {
  createNabiWith, mountSurface, mountToolbar, mountContextToolbar,
  mountHints, watchSettle, tableWings, imageWing, youtubeWing,
  mountViewTools,
} from 'nabi-note'

const selected = [
  ...tableWings,
  imageWing,
  youtubeWing,
]
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: 'ja' })

const settle = watchSettle(document, { surface: content })
const shared = { nabi, registry, surface: content, settle, locale: 'ja' }
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('img', {
  allowLocalUrls: false,
}).build()

この wing は文書にアドレスを入れる機能であり、ファイル転送は行いません。ファイルをサーバーへ送るにはアップロード wing を接続します。

CSS スタイル

画像は .nabi-content img で装飾します。保存された幅と配置はそのままにし、枠線や影のような見た目だけを変えてください。

css

.article-body img {
  border-radius: 12px;
  box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
}

.dark .article-body img { box-shadow: 0 8px 24px rgb(0 0 0 / 35%); }

max-inline-size、block-size、幅、配置に関する基本ルールは維持してください。画像サイズは文書に保存された値なので、CSS で強制的に固定すると作成者が選んだ幅と衝突します。