Hoto ​

Yana saka adireshin hoto kuma yana daidaita faɗi da matsayi. Ta asali ana yarda da http:, https:, ko hanyar shafin iri ɗaya kawai; sabon hoto yana farawa a tsakiya da faɗin 60%.

Ana adana faɗi ne kawai a cikin matakan da aka ƙayyade, kuma ana adana daidaitawa a sakin layin da ya kewaye hoton. Don amfani da samfotin blob: da data:image/..., dole ne ka yarda da URL na gida a bayyane a wing ɗin hoto da haɗawar edita bi da bi. Ba a yarda da URL ɗin bayanan SVG ba.

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('ha')
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()

Wannan wing yana saka adireshi a cikin daftari kawai; ba ya aika fayil. Domin tura fayil zuwa sabar, haɗa wing ɗin loda fayil.

Haɗa zaɓin hoto ​

Yi amfani da panels.img a cikin mountToolbar() don maye gurbin taga shigar da URL ta maɓallin hoto da zaɓin hotuna na sabis ɗinka. Makullai su ne sunayen guraben toolbar; kayan aikin da ba a ambata ba suna riƙe tagoginsu na asali.

mode: 'modal' yana buɗe taga a kan bango mai ɗan nuna abin da ke bayansa, wanda ya rufe dukan shafin. mode: 'inline' yana buɗewa kusa da maɓallin kayan aiki a kwamfuta, kuma yana cika allo a waya. Faɗin wurin nuni da --nabi-mobile-breakpoint ne ke tantance yanayin waya; idan aka tsallake wannan iyaka yayin da panel na inline yake buɗe, zai rufe.

Duk yanayin biyu suna samar da root marar komai kawai, ba tare da take, filayen shigarwa ko maɓallai ba. Saka HTML ko UI ɗinka a cikin render, haɗa maɓallin rufewa da close(), kuma haɗa zaɓin hoto da insertImage(url, 'pointer'). Saitunan da ake da su a tsarin aiki (img: renderer) suna riƙe yadda suke nunawa.

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 aiki ne da za ka aiwatar a cikin sabis ɗinka. Yana gina UI ɗinka a cikin root da aka bayar a lokaci guda, sannan ya mayar da aikin tsaftacewa. Haɗa signal da ayyukan da ba sa kammalawa nan take, kamar ɗauko jerin hotuna ko loda fayil, sannan ka miƙa URL na hoton da aka zaɓa zuwa onSelect. Wannan API ba ya aika fayiloli; ƙa’idodin URL na hotuna da ake da su suna ci gaba da aiki.

insertImage(src, by?) daidai yake da run('insertImage', { src }, by), har da ƙimar da yake mayarwa da ƙa’idodin dawo da zaɓi. Idan ba a ba da by ba, ana amfani da 'keyboard'. Kada ka mai da render aikin async.

Rufe taga ko cire toolbar yana soke signal kuma ya kira aikin tsaftacewa. run() yana rufe taga kuma ya aiwatar da umarni sau ɗaya a zaɓin da aka adana lokacin buɗewa. Idan an riga an rufe taga ko abubuwan da ke cikin takardar sun canza bayan buɗewa, yana mayar da false ba tare da aiwatar da umarnin ba.

Idan siginar rubutu kawai aka matsar, hoton zai shiga wurin farko da aka buɗe taga. Idan an buɗe ta cikin sel ko yankin iyo, hoton zai shiga ciki. Gyara ko maye gurbin takarda yana soke sakawa tare da sanarwa, ko da soke aiki ya dawo da abin da yake ciki daidai; sake buɗe taga ka sake zaɓar hoto.

Tsarin CSS ​

Ana yi wa hoto ado da .nabi-content img. Ka bar faɗi da daidaitawar da aka adana yadda suke, kuma ka canza kamanni kawai, kamar iyaka ko inuwa.

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

Ka bar dokokin asali game da max-inline-size, block-size, faɗi, da daidaitawa. Girman hoto ƙima ce da aka adana a daftari; idan CSS ya tilasta masa ƙima kafaffe, zai iya saɓa da faɗin da marubuci ya zaɓa.