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

NABI NOTE

मुक्त-स्रोत WYSIWYG संपादक

NABI NOTE हा मुक्त-स्रोत WYSIWYG संपादक आहे. स्वरूपण, संरेखन, तक्ते, अपलोड आणि इतर सुविधा कोअरपासून स्वतंत्र विंग्जमध्ये विभागलेल्या आहेत. आवश्यक तेवढे विंग्ज निवडून संपादक तयार करा किंवा स्वतःचे विंग्ज जोडा. साध्या JavaScript मध्ये लिहिलेला असल्याने तो React किंवा Vue सारख्या फ्रेमवर्कमध्ये वापरता येतो; build मांडणी नसलेल्या पानावर CDN लायब्ररी ने लगेच सुरू करता येतो. NABI TREE ब्राउझर DOM नसलेल्या Node.js वातावरणातही HTML मध्ये बदलता येते. नोंदवलेल्या नियमांनुसार इनपुट दुरुस्त होतो; HTML तयार करताना मजकूर व विशेषणे सुरक्षितपणे रूपांतरित होतात आणि दुव्यांचे पत्ते तपासले जातात. सानुकूल विंग्ज व सर्व्हरकडून आलेला डेटा आपल्या सुरक्षा धोरणानुसार तपासा. CSS चल आणि rem-आधारित मांडणीने थीम व आकार बदलता येतात; गडद मोड आणि अनेक भाषांसाठी अक्षररूपही उपलब्ध आहे. तक्ता क्रमवारी, स्थानिक इतिहास आणि AI-सहाय्यित दस्तऐवजाचे काम हे सर्व त्याच दस्तऐवज मॉडेलवर चालते.

अक्षररूप

सॅन्स सेरिफ (डीफॉल्ट), सेरिफ, मोनोस्पेस आणि हस्ताक्षर या प्रकारांसाठी भाषेनुसार पर्यायी फॉन्ट दिले आहेत. निवडलेल्या प्रकारासाठी योग्य फॉन्ट उपलब्ध नसेल तर ब्राउझरचा डीफॉल्ट फॉन्ट दिसतो. संपादकाचा डीफॉल्ट फॉन्ट होस्ट पृष्ठ ठरवते.

खाली प्रत्येक कुटुंब अनेक भाषांमध्ये दाखवले आहे.

산세리프 · ゴシック体 · 无衬线 · Serifenlos · Sans empattement · Sin serifa · Sem serifa · Без засечек · بلا زخارف · सैन्स सेरिफ़ · স্যান্স সেরিফ · سانس سیرف · Tanpa serif · بدون سریف · सॅन्स सेरिफ · Không chân · శాన్స్ సెరిఫ్ · Mara seref · Sans serif · Bila serif · சான்ஸ் செரிஃப் · ไร้เชิง · Senza grazie

세리프 · 明朝体 · 衬线 · Serif · Avec empattement · Con serifa · Com serifa · С засечками · بزخارف · सेरिफ़ · সেরিফ · سیرف · Berserif · سریف · सेरिफ · Có chân · సెరిఫ్ · Mai seref · Yenye serif · செரிஃப் · มีเชิง · Con grazie

고정폭 · 等幅 · 等宽 · Dicktengleich · Chasse fixe · Monoespaciada · Monoespaçada · Моноширинный · ثابت العرض · मोनोस्पेस · মনোস্পেস · یکساں چوڑائی · Lebar tetap · تک‌فاصله · Đơn cách · మోనోస్పేస్ · Tazara ɗaya · Eş aralıklı · Nafasi moja · ஒற்றையகலம் · ความกว้างคงที่ · Monospaziato · Monospace

필기체 · 筆記体 · 手写体 · Schreibschrift · Cursive · Cursiva · Рукописный · خط اليد · हस्तलिपि · হস্তলিপি · رواں خط · Tulisan tangan · دست‌نویس · हस्ताक्षर · Chữ viết tay · చేతిరాత · Rubutun hannu · El yazısı · Mwandiko · கையெழுத்து · ลายมือ · Corsivo

मजकूर आकार

अतिशय लहान

लहान

मोठा

अतिशय मोठा

शीर्षक

रिकाम्या ओळीवर # लिहून स्पेस दाबा; शीर्षक तयार होते.

H1

H2

H3

H4

H5

H6

ठळक · तिरपा · अधोरेखित · मधून रेषा

ठळक तिरपा अधोरेखित ~~मधून रेषा~~ एकाच अक्षरावर एकत्र लागू करता येतात.

~~हे एकावर एक लावता येतात.~~

सुपरस्क्रिप्ट आणि सबस्क्रिप्ट

क्षेत्रफळ 3.5m² आहे आणि अशी तळटीप जोडली जाते.¹

पाणी H₂O आहे.

मजकूर रंग · हायलाइट

हलका आणि गडद अशा दोन्ही मोडमध्ये वाचता येईल अशी रंगसंगती निवडलेली आहे.

मजकूर रंग हिरवा · कोरल · जांभळा · अंबर · निळा

ठळक रंग पिवळा · हिरवा · सायन · गुलाबी · जांभळा · नारिंगी

दुवा

पत्ता घातल्यावर तो दुवा बनतो.

http://, https:// तसेच . किंवा / ने सुरू होणारे त्याच संकेतस्थळाचे मार्ग वापरता येतात. javascript: सारख्या पत्त्यांना परवानगी नाही.

उदाहरणार्थ, https://nabi.saro.me लिहून स्पेस किंवा एंटर दाबा — येथे दिसते तसे तो आपोआप बदलतो.

दुवा उघडणे

दस्तऐवजात फक्त दुव्याचा पत्ता साठवला जातो; तो कसा उघडायचा हे दस्तऐवज दाखवणारे पान ठरवते.

संलग्नक दुवा

प्रतिमा नसलेल्या फाइल्स खालीलप्रमाणे जोडलेल्या फाइलच्या दुव्याच्या रूपात राहतात.

संलग्नक याचा दुवा दस्तऐवजात जतन होतो.

संरेखन

डावीकडे संरेखित

मध्यभागी संरेखित

उजवीकडे संरेखित

शीर्षकांवर संरेखन लागू करता येत नाही.

सूच्या

बुलेट सूची

रिकाम्या ओळीवर - लिहून स्पेस दाबा — तिथेच बुलेट सूची तयार होते.

बुलेट आयटम
- Tab / Shift+Tab ने आत आणि बाहेर इंडेंट करा.

क्रमांकित सूची

रिकाम्या ओळीवर 1. लिहून स्पेस दाबल्यावर क्रमांकित सूची तयार होते.

पहिला
दुसरा
तिसरा

तपासणी सूची

रिकाम्या ओळीवर [ ] किंवा [x] लिहून स्पेस दाबल्यावर तपासणी सूची तयार होते.

पूर्ण झालेले काम
राहिलेले काम

तक्ता

सेलमध्ये अनेक परिच्छेद व ब्लॉक ठेवता येतात आणि पार्श्वभूमीच्या रंगाने मजकूर वेगळा ओळखता येतो. खालील तक्त्यातील मजकूर व चित्रे थेट संपादित करून पाहा.

संदर्भ साहित्य	कामाच्या नोंदी
चित्र आणि त्याचे वर्णन एकाच सेलमध्ये आहे.	परिच्छेदांची मोकळी रचना नवीन परिच्छेदासाठी Enter किंवा त्याच परिच्छेदात नवीन ओळीसाठी Shift+Enter दाबा.
सेलचा पार्श्वभूमी रंग बदलणे यादीत Tab ने इंडेंट करणे अनेक सेल निवडून एकच रंग लावणे	संपादनाच्या टिपा पाहण्यासाठी क्लिक करा सेलमध्ये दुमडता येणारे ब्लॉक, उद्धरण, कोड आणि व्हिडिओही ठेवता येतात. सेल एकत्र केल्यावर प्रत्येक सेलचा मजकूर मूळ क्रमाने राहतो.

संदर्भ साहित्य

कामाच्या नोंदी

चित्र आणि त्याचे वर्णन एकाच सेलमध्ये आहे.

परिच्छेदांची मोकळी रचना

नवीन परिच्छेदासाठी Enter किंवा त्याच परिच्छेदात नवीन ओळीसाठी Shift+Enter दाबा.

सेलचा पार्श्वभूमी रंग बदलणे
यादीत Tab ने इंडेंट करणे
अनेक सेल निवडून एकच रंग लावणे

संपादनाच्या टिपा पाहण्यासाठी क्लिक करा

सेलमध्ये दुमडता येणारे ब्लॉक, उद्धरण, कोड आणि व्हिडिओही ठेवता येतात.

सेल एकत्र केल्यावर प्रत्येक सेलचा मजकूर मूळ क्रमाने राहतो.

सेलमध्ये क्लिक केल्यावर पार्श्वभूमी रंग व ओळी-स्तंभांची साधने दिसतात. अनेक सेल निवडून रंग आणि संरेखन एकाच वेळी बदलता येते. संपूर्ण तक्त्याची जागा बदलण्यासाठी “संपूर्ण तक्ता निवडा” निवडून संरेखनाची साधने वापरा.

रंग किंवा अनेक ब्लॉक असलेले तक्ते Markdown मध्ये जतन करतानाही HTML म्हणून ठेवले जातात.

सेलचे पार्श्वभूमी रंग

समर्थित सर्व पार्श्वभूमी रंग येथे आहेत. रंग बदलण्यासाठी सेलवर क्लिक करा किंवा गुणधर्मांच्या साधनांत “डीफॉल्ट” निवडून पार्श्वभूमी काढा.

पिवळा

yellow

हिरवा

green

सायन

cyan

गुलाबी

pink

जांभळा

purple

नारिंगी

orange

स्तंभ क्रमवारी

पूर्वावलोकन उघडा; नंतर अनुक्रमे साठा आणि किंमत या शीर्षक सेलवर क्लिक करा.

मॉडेल	साठा	किंमत	वजन
NB-7	1,200	349	1.2 kg
NB-9	20,000	99	0.9 kg
NB-12	3,500	1,299	1.4 kg
NB-80	900	8,900	2.1 kg
NB-100	TBD	12,999	2.4 kg

किंमत स्तंभातील सर्व मूल्ये संख्या आहेत, म्हणून त्यांची संख्येनुसार क्रमवारी लावली जाते.

साठा स्तंभात संख्या आणि मजकूर दोन्ही आहेत, म्हणून त्यांची मजकूर-स्ट्रिंगनुसार क्रमवारी लावली जाते.

विभाजक

--- लिहून एंटर दाबा, म्हणजे तो विभाजक बनतो.

प्रतिमा

रुंदी 30% ते 100% असू शकते आणि प्रतिमा डावीकडे, मध्यभागी किंवा उजवीकडे ठेवता येते.

फ्लोट क्षेत्र

एका नजरेत

मजकूर, चित्रे आणि तक्त्यांसाठी लहान पूरक क्षेत्र.

स्थान	उजवीकडे
कमाल रुंदी	40%

मुख्य मजकुराच्या बाजूला पूरक स्पष्टीकरण किंवा लहान साहित्य ठेवण्यासाठी फ्लोट क्षेत्र वापरा. रुंद दस्तऐवजात हा मजकूर क्षेत्राच्या बाजूने वाहतो. आत क्लिक करून त्याच संपादकात मजकूर बदला व चित्रे किंवा तक्ते घाला.

गुणधर्मांची साधने उघडण्यासाठी क्षेत्रात कर्सर ठेवा. डावे-उजवे स्थान बदला आणि मजकुराला योग्य अशी 20, 30, 40 किंवा 50% कमाल रुंदी निवडा. पेस्ट केलेले तक्ते आणि चित्रेही क्षेत्रातच राहतात.

निवडलेले परिच्छेदही क्षेत्रात गुंडाळता येतात. रुंदीच्या बाजूचे क्षेत्र सोडवण्याचे बटण आतला मजकूर मुख्य दस्तऐवजात ठेवते. पूर्वावलोकनात संपादनाची ठिपक्यांची सीमा लपते; अरुंद दस्तऐवजात किंवा छपाईत मजकूर एकाच स्तंभात येतो.

YouTube

अपलोड

प्रतिमा किंवा फाइल संपादकावर ओढून टाकून पाहा.

हा डेमो फाइल प्रत्यक्ष सर्व्हरवर पाठवत नाही. सर्व्हरवर जतन करण्यासाठी आपल्या अनुप्रयोगाला अपलोडर जोडा.

चित्र निवडक उघडल्यानंतर किंवा अपलोड सुरू केल्यानंतर फक्त कर्सर हलवल्यास समावेश मूळ जागीच होतो. प्रतीक्षा करताना दस्तऐवज संपादित केल्यास समावेश रद्द होतो व सूचना दिसते. सेलमध्ये सुरू केलेल्या अपलोडची प्रगती आणि परिणामही त्याच सेलमध्ये राहतात.

अवतरण

रिकाम्या ओळीवर > आणि space दाबल्याने अवतरण तयार होते.
ते अनेक ओळींमध्ये असू शकते.

कोड

रिकाम्या ओळीवर ``` लिहून space किंवा enter दाबल्यास कोड बॉक्स तयार होतो.

```java प्रमाणे भाषा लिहून space किंवा enter दाबल्यास ती भाषा असलेला कोड बॉक्स तयार होतो.

import { createNabiWith, defaultWings } from 'nabi-note'

const { nabi } = createNabiWith(defaultWings)
const html = nabi.getHtml()

तपशील

तपशीलात सारांश आणि मुख्य मजकूर असतो.

तो मिटलेल्या किंवा उघड्या स्थितीत जतन करायचा हे निवडता येते.

टूलबार

शीर्षक, मजकूर स्वरूप, संरेखन, याद्या, समावेश आणि दस्तऐवजाची साधने गटांत आहेत. संगणकावर साधने उघडी दिसतात; मोबाइलवर झटपट साधने आणि पूर्ण पॅलेट मिळते. निवडलेल्या तक्त्याचे किंवा फ्लोट क्षेत्राचे गुणधर्म टूलबारखाली दिसतात.

कळफलक शॉर्टकट

Shift पटकन दोनदा दाबा आणि कीबोर्डने साधने निवडा. संगणकावर उघड्या टूलबारमध्ये, मोबाइलवर पूर्ण पॅलेटमध्ये फिरा. Tab ने गट बदला, बाणांच्या कळांनी साधन निवडा व Enter ने चालवा.

उद्धरण, कोड किंवा दुमडता येणाऱ्या ब्लॉकच्या शेवटी Enter पटकन दोनदा दाबून बाहेर पडता येते. दोनदा दाबण्यातील मूलभूत अंतर 180ms आहे.

आपोआप स्वरूपण

उदाहरण	क्रिया कळ	परिणाम
#	Space	शीर्षक
-	Space	बुलेट सूची
1.	Space	क्रमांकित सूची
[ ] · [x]	Space	कामांची सूची
>	Space	अवतरण
``` · ```ts	Space · Enter	कोड चौकट
---	Enter	विभाजक
https://…	Space · Enter	दुवा

आउटपुट कार्ये

कार्य	परिणाम
getHtml()	HTML
getJson()	JSON

DOM शिवायही चालते

NABI TREE मधून HTML तयार करण्यासाठी DOM ची गरज नसते.

सर्व्हर (Node.js) देखील साठवलेला NABI TREE वाचून त्याच नियमांनुसार HTML तयार करू शकतो.

मोबाइलस्नेही

मोबाइल UI — स्क्रीनच्या रुंदीनुसार संपादन साधनांची मांडणी करते.
मोबाइल कीबोर्ड समायोजन — कीबोर्ड उघडल्यावर संपादन क्षेत्राची उंची समायोजित करते.
लवचिक आकार — झूम वाढवताना किंवा कमी करताना जुळवून घेण्यासाठी मुख्य मांडणीत rem एकके वापरते.
अनेक भाषा — भाषा आणि मजकुराच्या दिशेनुसार लोकेल व टाइपफेस सेट करता येतात.

सानुकूलन

तुमची स्वतःची विंग — एखाद्या सुविधेची गरज असेल तर ती स्वतः तयार करून जोडू शकता.
तुमचे स्वतःचे CSS — मुख्य रंग, कोपरे आणि अंतर --nabi-* टोकन वापरून हलक्या आणि गडद मोडनुसार बदलू शकता.
मुक्त स्रोत — स्रोत कोड GitHub वर प्रकाशित करून एकत्र विकसित केला जातो.

दस्तऐवज वाचा → nabi.saro.me

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

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

स्थापित करा

npm install nabi-note

कोड

import {
  createLocale, createNabiWith, mountSurface, mountToolbar,
  mountContextToolbar, mountHints, watchSettle, makeTranslator,
  defaultWings, mountUpload, mountUploadView, browserFileStore,
  mountFile, mountViewTools, browserHistoryStorage, mountLocalHistory,
  openHistoryPanel,
} from 'nabi-note'
import { mountDiffWing } from 'nabi-note/diff'
import { mountOutline } from 'nabi-note/viewer'

// The box that asks — without it the core answers "no" to everything (plug in your own)
const ask = { message: (t: string) => alert(t), confirm: (t: string) => confirm(t) }

const selected = [
  ...defaultWings,
]
const locale = createLocale('mr')
const { nabi, registry } = createNabiWith(selected, { ask, locale })

// 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')!

const view = mountUploadView({ nabi, surface: content, locale })
const upload = mountUpload({
  nabi, root: content, locale,
  // your upload goes here — report progress with task.onProgress(0–100)
  uploader: async (task) => ({ uri: 'https://cdn.example/uploaded' }),
  extensions: ['png', 'jpg', 'pdf'], maxFileSize: 10 * 1024 * 1024,
  onStart: (tasks) => view.start(tasks),
  onProgress: (id, percent) => view.progress(id, percent),
  onSettle: () => view.settle(),
  onDone: () => view.done(),
})
const file = mountFile({ nabi, registry, store: browserFileStore(document), locale, name: () => 'note' })
const history = mountLocalHistory({ nabi, storage: browserHistoryStorage(window) })
const diff = mountDiffWing({ nabi, registry, surface: content, locale })

// The locale also sets the direction — Arabic and Urdu run right to left
mountSurface({ nabi, registry, root: content, locale, fileSink: upload.take })

const trigger = document.createElement('button')
trigger.type = 'button'
trigger.textContent = makeTranslator(locale).t('outline')
trigger.style.cssText = 'position:fixed;right:1rem;bottom:1rem;z-index:1000'
root.append(trigger)
const outline = mountOutline(content, {
  trigger, locale,
  scrollContainer: () => root.classList.contains('is-fullscreen') ? root : window,
  onChange: ({ items, activeIndex, available, open }) => {
    trigger.hidden = !available
    trigger.setAttribute("aria-expanded", String(open))
  },
})
trigger.onclick = () => outline.toggle()
// Call outline.unmount() when removing the editor

const settle = watchSettle(document, { surface: content })
const shared = { nabi, registry, surface: content, settle, locale }
// A tool that needs a panel comes back to the host — without this the button is dead
const toolbar = mountToolbar({
  ...shared, root: document.querySelector('#toolbar')!,
  file,
  onFiles: upload.take,
  onHost: (w) => {
    if (w === 'diff') { diff.open(); return }
    if (w !== 'localHistory') return
    openHistoryPanel({
      history, surface: content, locale, sessionId: history.sessionId,
      render: (record) => createNabiWith(selected, { doc: JSON.parse(record.body) }).nabi.getHtml(),
    })
  },
})
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')