படம் ​

பட முகவரியைச் சேர்த்து அகலத்தையும் சீரமைப்பையும் மாற்றுகிறது. இயல்பாக http:, https: அல்லது அதே தளப் பாதைகள் மட்டுமே அனுமதிக்கப்படுகின்றன; புதிய படம் மையச் சீரமைப்பிலும் 60% அகலத்திலும் தொடங்கும்.

அகலம் நிர்ணயிக்கப்பட்ட நிலைகளில் மட்டுமே சேமிக்கப்படுகிறது; சீரமைப்பு படத்தைச் சுற்றியுள்ள பத்தியில் சேமிக்கப்படுகிறது. blob: மற்றும் data:image/... முன்னோட்டங்களைப் பயன்படுத்த, பட wing மற்றும் தொகுப்பி அமைப்பில் உள்ளூர் URL-களைத் தெளிவாக அனுமதிக்க வேண்டும். SVG data URL-கள் அனுமதிக்கப்படாது.

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('ta')
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 ஐ இணைக்கவும்.

படத் தேர்வியை இணைத்தல் ​

படப் பொத்தானின் இயல்புநிலை URL உள்ளீட்டுச் சாளரத்துக்குப் பதிலாக உங்கள் சேவையின் படத் தேர்வியைப் பயன்படுத்த, mountToolbar() இல் panels.img கொடுக்கவும். விசைகள் கருவிப்பட்டை slot பெயர்களாகும்; குறிப்பிடாத கருவிகள் அவற்றின் இயல்புநிலைச் சாளரங்களையே பயன்படுத்தும்.

mode: 'modal' முழுப் பக்கத்தையும் மூடும் ஓரளவு ஒளிபுகும் பின்னணியின் மேல் சாளரத்தைத் திறக்கும். mode: 'inline' கணினியில் கருவிப் பொத்தானுக்கு அருகிலும் மொபைலில் முழுத் திரையிலும் திறக்கும். காட்சிப்பகுதியின் அகலமும் --nabi-mobile-breakpoint மதிப்பும் மொபைல் காட்சியைத் தீர்மானிக்கின்றன; inline பலகம் திறந்திருக்கும்போது இந்த எல்லையைக் கடந்தால் பலகம் மூடப்படும்.

இரண்டு முறைகளும் வெற்று root மட்டுமே வழங்கும்; தலைப்பு, உள்ளீட்டுப் புலங்கள் அல்லது பொத்தான்களை உருவாக்காது. render-இல் உங்கள் HTML அல்லது UI-ஐச் சேர்த்து, மூடும் பொத்தானை 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-க்குள் உங்கள் UI-ஐ ஒத்திசைவாக உருவாக்கி, சுத்தம் செய்யும் செயல்பாட்டைத் திருப்பித் தருகிறது. படப் பட்டியலைப் பெறுதல் அல்லது பதிவேற்றுதல் போன்ற ஒத்திசைவற்ற பணிகளுடன் 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-ல் வலுக்கட்டாயமாக நிர்ணயித்தால் ஆசிரியர் தேர்ந்தெடுத்த அகலத்துடன் முரண்படலாம்.