Gambar ​

Sisipkan URL gambar lalu sesuaikan lebar dan perataannya. Secara bawaan, alamat dibatasi pada http:, https:, atau jalur situs yang sama; gambar baru dimulai di tengah dengan lebar 60%.

Lebar hanya disimpan dalam langkah tetap, dan perataan disimpan pada paragraf pembungkus gambar. Untuk memakai pratinjau blob: atau data:image/..., izinkan URL lokal secara eksplisit pada wing gambar maupun perakitan editor. URL data SVG tidak diizinkan.

npm install nabi-note

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

const selected = [
  ...tableWings,
  imageWing,
  youtubeWing,
]
const locale = createLocale('id')
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')

const selected = wings().use('img', {
  allowLocalUrls: false,
}).build()

Wing ini menyisipkan alamat ke dalam dokumen; wing ini tidak mengunggah berkas. Untuk mengirim berkas ke server, hubungkan wing unggah.

Menghubungkan pemilih gambar ​

Gunakan panels.img di mountToolbar() untuk mengganti dialog URL bawaan tombol gambar dengan pemilih gambar layanan Anda. Kunci adalah nama slot toolbar; alat yang tidak dicantumkan tetap menggunakan dialog bawaannya.

mode: 'modal' membuka jendela di atas latar semitransparan yang menutupi seluruh halaman. mode: 'inline' membuka panel di dekat tombol alat pada desktop dan memenuhi layar pada perangkat seluler. Lebar viewport dan --nabi-mobile-breakpoint menentukan tampilan seluler; jika ambang ini dilintasi saat panel inline terbuka, panel akan ditutup.

Kedua mode hanya menyediakan root kosong, tanpa judul, kolom masukan, atau tombol. Tambahkan HTML atau UI Anda dalam render, hubungkan tombol tutup ke close(), dan pemilihan gambar ke insertImage(url, 'pointer'). Konfigurasi berbentuk fungsi yang sudah ada (img: renderer) mempertahankan perilaku tampilannya.

import { mountToolbar } from 'nabi-note'

const toolbar = mountToolbar({
  nabi,
  registry,
  root: toolbarRoot,
  surface: content,
  panels: {
    img: {
      mode: 'inline',
      render: ({ root, signal, close, insertImage }) =>
        mountMyImagePicker(root, {
          signal,
          onClose: close,
          onSelect: (url: string) => insertImage(url, 'pointer'),
        }),
    },
  },
})

mountMyImagePicker adalah fungsi yang Anda implementasikan di layanan Anda. Fungsi ini membuat UI secara sinkron di dalam root yang diberikan dan mengembalikan fungsi pembersihan. Hubungkan signal ke pekerjaan asinkron seperti memuat daftar gambar atau mengunggah, lalu teruskan URL gambar yang dipilih ke onSelect. API ini tidak mengirim berkas; aturan URL gambar yang sudah ada tetap berlaku.

insertImage(src, by?) setara dengan run('insertImage', { src }, by), termasuk nilai kembalian dan aturan pemulihan seleksi. Jika by tidak diberikan, 'keyboard' digunakan. Jangan jadikan render sebagai fungsi async.

Menutup panel atau melepas toolbar membatalkan signal dan memanggil fungsi pembersihan. run() menutup panel dan menerapkan perintah satu kali pada pilihan yang disimpan saat panel dibuka. Jika panel sudah ditutup atau isi dokumen berubah sejak dibuka, fungsi ini mengembalikan false tanpa menjalankan perintah.

Jika Anda hanya memindahkan kursor, gambar disisipkan pada posisi awal saat panel dibuka. Jika panel dibuka di dalam sel tabel atau area mengambang, gambar masuk ke dalamnya. Mengedit atau mengganti dokumen membatalkan penyisipan dan menampilkan pemberitahuan meskipun undo mengembalikan isi yang sama; buka kembali panel untuk memilih gambar lagi.

Gaya CSS ​

Atur gaya gambar dengan .nabi-content img. Pertahankan lebar dan perataan tersimpan, dan ubah hanya detail visual seperti batas atau bayangan.

.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%); }

Pertahankan aturan bawaan untuk max-inline-size, block-size, lebar, dan perataan. Ukuran gambar disimpan dalam dokumen, sehingga memaksakan lebar CSS tetap dapat berbenturan dengan lebar pilihan penulis.