NABI NOTE
Nyaraka

YouTube ​

Kubali URL ya video ya YouTube au kitambulisho cha video na ukigeuze kuwa blokii iliyopachikwa. Hati huhifadhi kitambulisho cha video chenye herufi 11 na upana pekee, si URL kamili, na video mpya huanza ikiwa katikati kwa upana wa 70%.

Upana huchaguliwa kutoka hatua zisizobadilika, na mpangilio huhifadhiwa kwenye aya inayofunga video. Katika kihariri, mbofyo wa kwanza huchagua video; ikishachaguliwa, kubofya tena kunaweza kuicheza. Ili kubadilisha anwani, futa video na uingize mpya.

Mabawa
Aina msingi ya herufiKipenyo
HTMLKihariri kinapakiwa…
JSONnabi-treeKihariri kinapakiwa…
Sakinisha
npm install nabi-note
Msimbo
import {
  createNabiWith, mountSurface, mountToolbar, mountContextToolbar,
  mountHints, watchSettle, codeWing, imageWing, youtubeWing,
  mountViewTools,
} from 'nabi-note'

const selected = [
  codeWing,
  imageWing,
  youtubeWing,
]
const { nabi, registry } = createNabiWith(selected)

// Bring your own highlighter (Prism, highlight.js, Shiki, …) — the wing stays as it is
// and only the attach is swapped (`makeCodeAttach` ships from the same door)
// { ...codeWing, attach: makeCodeAttach({ highlight: (source, lang) => [{ text: source }] }) }

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: 'sw' })

const settle = watchSettle(document, { surface: content })
const shared = { nabi, registry, surface: content, settle, locale: 'sw' }
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()))
ts
const selected = wings().use('youtube').build()

Mitindo ya CSS ​

Tumia .nabi-content iframe kubadilisha mpaka au pembe za video. Usibadilishe upana au mpangilio uliohifadhiwa.

css
.article-body iframe {
  border-radius: 14px;
  box-shadow: 0 10px 28px rgb(0 0 0 / 16%);
}

Kifurushi hutumia aspect-ratio, upana na pambizo za mpangilio ili kudumisha ukubwa sahihi wa video, kwa hiyo usizibadilishe.