प्रतिमा

image URL घाला आणि त्याची width व alignment समायोजित करा. default ने addresses http:, https: किंवा त्याच site च्या paths पुरते मर्यादित असतात आणि नवी image 60% width वर मध्यभागी सुरू होते.

width फक्त ठराविक steps मध्ये साठवली जाते आणि alignment image ला wrap करणाऱ्या paragraph वर साठवले जाते. blob: किंवा data:image/... previews साठी image wing आणि editor assembly दोन्हींमध्ये local URLs स्पष्टपणे allow करा. SVG data URLs ला परवानगी नाही.

चिकट साधनपट्टी मोबाइल कळफलकाची जागामूलभूत अक्षररूपअंतर

HTMLसंपादक लोड होत आहे…

JSONnabi-treeसंपादक लोड होत आहे…

स्थापित करा

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('mr')
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 document मध्ये address घालतो; तो files upload करत नाही. server वर files पाठवण्यासाठी upload wing जोडा.

प्रतिमा निवडण्याची खिडकी जोडणे

प्रतिमा बटणाची मूलभूत 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 ने images style करा. साठवलेली width आणि alignment जशी आहे तशी ठेवा व borders किंवा shadows सारखे दृश्य तपशीलच बदला.

css

.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, width आणि alignment यांचे default rules ठेवा. image size document मध्ये साठवली जाते, म्हणून निश्चित CSS width सक्तीने लावल्यास लेखकाने निवडलेल्या width शी संघर्ष होऊ शकतो.

प्रतिमा ​

प्रतिमा निवडण्याची खिडकी जोडणे ​

CSS शैली ​

प्रतिमा

प्रतिमा निवडण्याची खिडकी जोडणे

CSS शैली