చిత్రం ​

చిత్రం URLను చేర్చి దాని వెడల్పు, సమలేఖనాన్ని సర్దండి. డిఫాల్ట్‌గా చిరునామాలు http:, https:, లేదా అదే సైట్ మార్గాలకు పరిమితం; కొత్త చిత్రం 60% వెడల్పుతో మధ్యలో మొదలవుతుంది.

వెడల్పు నిర్ణీత దశలలోనే నిల్వ అవుతుంది; సమలేఖనం చిత్రాన్ని చుట్టిన పేరాలో నిల్వ అవుతుంది. blob: లేదా data:image/... ప్రివ్యూల కోసం చిత్రం వింగ్, ఎడిటర్ అసెంబ్లీలో స్థానిక URLలను స్పష్టంగా అనుమతించండి. SVG డేటా 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('te')
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()

ఈ వింగ్ పత్రంలో చిరునామాను మాత్రమే చేర్చుతుంది; ఫైళ్లను అప్‌లోడ్ చేయదు. ఫైళ్లను సర్వర్‌కు పంపడానికి అప్‌లోడ్ వింగ్ను కలపండి.

చిత్ర ఎంపిక విండోను అనుసంధానించడం ​

చిత్ర బటన్‌లోని డిఫాల్ట్ URL ఇన్‌పుట్ విండోను మీ సేవలోని చిత్ర ఎంపిక విండోతో మార్చడానికి mountToolbar()లో panels.img వాడండి. కీలు టూల్‌బార్ స్లాట్ పేర్లు; పేర్కొనని సాధనాలు వాటి డిఫాల్ట్ విండోలనే ఉపయోగిస్తాయి.

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 వెడల్పును బలవంతం చేస్తే రచయిత ఎంచుకున్న వెడల్పుతో విరుద్ధమవుతుంది.