تصویر ​

نشانی تصویر را وارد کنید و عرض و هم‌ترازی آن را تنظیم کنید. به‌طور پیش‌فرض نشانی‌ها به http:، https: یا مسیرهای همان سایت محدودند و تصویر تازه با عرض ۶۰٪ در مرکز آغاز می‌شود.

عرض تنها در گام‌های ثابت ذخیره می‌شود و هم‌ترازی روی پاراگرافِ دربرگیرندهٔ تصویر ذخیره می‌شود. برای استفاده از پیش‌نمایش‌های blob: یا data:image/...، باید در wing تصویر و پیکربندی ویرایشگر صریحاً نشانی‌های محلی را مجاز کنید. نشانی‌های دادهٔ SVG مجاز نیستند.

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('fa')
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 یک نشانی را در سند وارد می‌کند؛ فایل‌ها را بارگذاری نمی‌کند. برای فرستادن فایل به سرور، wing بارگذاری را متصل کنید.

اتصال انتخابگر تصویر ​

با panels.img در mountToolbar() می‌توانید پنجرهٔ پیش‌فرض ورود URL دکمهٔ تصویر را با انتخابگر تصویر سرویس خود جایگزین کنید. کلیدها نام اسلات‌های نوار ابزار هستند؛ ابزارهایی که مشخص نشده‌اند پنجرهٔ پیش‌فرض خود را نگه می‌دارند.

mode: 'modal' پنجره‌ای روی پس‌زمینهٔ نیمه‌شفافِ تمام‌صفحه باز می‌کند. mode: 'inline' در رایانه نزدیک دکمهٔ ابزار و در موبایل به‌صورت تمام‌صفحه باز می‌شود. عرض ناحیهٔ نمایش و --nabi-mobile-breakpoint حالت موبایل را تعیین می‌کنند؛ اگر هنگام باز بودن پنل inline از این آستانه عبور شود، پنل بسته می‌شود.

هر دو حالت فقط یک root خالی فراهم می‌کنند و عنوان، کادر ورودی یا دکمه نمی‌سازند. HTML یا رابط دلخواه خود را در render اضافه کنید، دکمهٔ بستن را به close() و انتخاب تصویر را به insertImage(url, 'pointer') متصل کنید. تنظیمات تابعی موجود (img: renderer) روش نمایش قبلی خود را حفظ می‌کنند.

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 تابعی است که در سرویس خود پیاده‌سازی می‌کنید. این تابع رابط دلخواه شما را به‌صورت همگام در root دریافتی می‌سازد و یک تابع پاک‌سازی برمی‌گرداند. signal را به کارهای ناهمگام مانند دریافت فهرست تصاویر یا بارگذاری فایل متصل کنید و URL تصویر انتخاب‌شده را به onSelect بدهید. این API فایل‌ها را منتقل نمی‌کند و قوانین فعلی URL تصاویر همچنان برقرار است.

insertImage(src, by?) از نظر مقدار بازگشتی و قواعد بازیابی انتخاب نیز معادل run('insertImage', { src }, by) است. اگر by حذف شود، از 'keyboard' استفاده می‌شود. render را به‌صورت تابع async تعریف نکنید.

با بستن پنجره یا برداشتن نوار ابزار، signal لغو و تابع پاک‌سازی اجرا می‌شود. run() پنجره را می‌بندد و فرمان را یک بار بر انتخاب ذخیره‌شده هنگام باز شدن اعمال می‌کند. اگر پنجره از قبل بسته شده باشد یا محتوای سند پس از باز شدن تغییر کرده باشد، بدون اجرای فرمان false برمی‌گرداند.

اگر فقط مکان‌نما را جابه‌جا کنید، تصویر در موقعیت اولیه‌ای درج می‌شود که پنل در آن باز شده است. اگر پنل داخل سلول یا ناحیهٔ شناور باز شده باشد، تصویر در همان‌جا قرار می‌گیرد. ویرایش یا جایگزینی سند، درج را لغو کرده و پیام نشان می‌دهد، حتی اگر واگرد همان محتوا را برگرداند؛ پنل را دوباره باز کنید و تصویر را دوباره انتخاب کنید.

سبک‌های CSS ​

تصاویر را با .nabi-content img سبک‌دهی کنید. عرض و هم‌ترازی ذخیره‌شده را دست‌نخورده نگه دارید و فقط جزئیات ظاهری مانند کادر یا سایه را تغییر دهید.

.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 می‌تواند با عرض انتخاب‌شده توسط نویسنده تداخل داشته باشد.