NABI NOTE
मुक्त-स्रोत WYSIWYG संपादक
NABI NOTE हा मुक्त-स्रोत WYSIWYG संपादक आहे. स्वरूपण, संरेखन, तक्ते, अपलोड आणि इतर सुविधा कोअरपासून स्वतंत्र विंग्जमध्ये विभागलेल्या आहेत. आवश्यक तेवढे विंग्ज निवडून संपादक तयार करा किंवा स्वतःचे विंग्ज जोडा. साध्या JavaScript मध्ये लिहिलेला असल्याने तो React किंवा Vue सारख्या फ्रेमवर्कमध्ये वापरता येतो; build मांडणी नसलेल्या पानावर CDN लायब्ररी ने लगेच सुरू करता येतो. NABI TREE ब्राउझर DOM नसलेल्या Node.js वातावरणातही HTML मध्ये बदलता येते. नोंदवलेल्या नियमांनुसार इनपुट दुरुस्त होतो; HTML तयार करताना मजकूर व विशेषणे सुरक्षितपणे रूपांतरित होतात आणि दुव्यांचे पत्ते तपासले जातात. सानुकूल विंग्ज व सर्व्हरकडून आलेला डेटा आपल्या सुरक्षा धोरणानुसार तपासा. CSS चल आणि rem-आधारित मांडणीने थीम व आकार बदलता येतात; गडद मोड आणि अनेक भाषांसाठी अक्षररूपही उपलब्ध आहे. तक्ता क्रमवारी, स्थानिक इतिहास आणि AI-सहाय्यित दस्तऐवजाचे काम हे सर्व त्याच दस्तऐवज मॉडेलवर चालते.
अक्षररूप
सॅन्स सेरिफ (मूलभूत), सेरिफ, मोनोस्पेस आणि हस्तलिखित अशा प्रत्येक कुटुंबात लिपीनुसार फॉन्टची रांग असते. मूलभूत अक्षररूप होस्ट ठरवतो.
खाली प्रत्येक कुटुंब अनेक भाषांमध्ये दाखवले आहे.
सॅन्स सेरिफ · Sans serif · 산세리프 · ゴシック体 · 无衬线 · Serifenlos · Sans empattement · Sin serifa · Sem serifa · Без засечек · بلا زخارف · सैन्स सेरिफ़ · স্যান্স সেরিফ · سانس سیرف · Tanpa serif · بدون سریف · Không chân · శాన్స్ సెరిఫ్ · Mara seref · Bila serif · சான்ஸ் செரிஃப் · ไร้เชิง · Senza grazie
सेरिफ · Serif · 세리프 · 明朝体 · 衬线 · Avec empattement · Con serifa · Com serifa · С засечками · بزخارف · सेरिफ़ · সেরিফ · سیرف · Berserif · سریف · Có chân · సెరిఫ్ · Mai seref · Yenye serif · செரிஃப் · มีเชิง · Con grazie
मोनोस्पेस · Monospace · 고정폭 · 等幅 · 等宽 · Dicktengleich · Chasse fixe · Monoespaciada · Monoespaçada · Моноширинный · ثابت العرض · मोनोस्पेस · মনোস্পেস · یکساں چوڑائی · Lebar tetap · تکفاصله · Đơn cách · మోనోస్పేస్ · Tazara ɗaya · Eş aralıklı · Nafasi moja · ஒற்றையகலம் · ความกว้างคงที่ · Monospaziato
हस्तलिपी · Cursive · 필기체 · 筆記体 · 手写体 · Schreibschrift · Cursiva · Рукописный · خط اليد · हस्तलिपि · হস্তলিপি · رواں خط · Tulisan tangan · دستنویس · हस्ताक्षर · Chữ viết tay · చేతిరాత · Rubutun hannu · El yazısı · Mwandiko · கையெழுத்து · ลายมือ · Corsivo
मजकूर आकार
अतिशय लहान
लहान
मोठा
अतिशय मोठा
शीर्षक
रिकाम्या ओळीवर # लिहून स्पेस दाबा; शीर्षक तयार होते.
H1
H2
H3
H4
H5
H6
ठळक · तिरपा · अधोरेखित · मधून रेषा
ठळक तिरपा अधोरेखित मधून रेषा — उदाहरण.
हे एकावर एक लावता येतात.
सुपरस्क्रिप्ट आणि सबस्क्रिप्ट
क्षेत्रफळ 3.5m2 आहे आणि अशी तळटीप जोडली जाते.1
पाणी H2O आहे.
मजकूर रंग · हायलाइट
हलका आणि गडद अशा दोन्ही मोडमध्ये वाचता येईल अशी रंगसंगती निवडलेली आहे.
मजकूर रंग हिरवा · कोरल · जांभळा · अंबर · निळा
ठळक रंग पिवळा · हिरवा · सायन · गुलाबी · जांभळा · नारिंगी
दुवा
पत्ता घातल्यावर तो दुवा बनतो.
http://, https:// तसेच . किंवा / ने सुरू होणारे त्याच संकेतस्थळाचे मार्ग वापरता येतात. javascript: सारख्या पत्त्यांना परवानगी नाही.
उदाहरणार्थ, https://nabi.saro.me लिहून स्पेस किंवा एंटर दाबा — येथे दिसते तसे तो आपोआप बदलतो.
दुवा उघडणे
दस्तऐवजात फक्त दुव्याचा पत्ता साठवला जातो; तो कसा उघडायचा हे दस्तऐवज दाखवणारे पान ठरवते.
संलग्नक दुवा
प्रतिमेशिवाय काहीही अपलोड केल्यास खालीलप्रमाणे फाइलसारखा दुवा राहतो.
संलग्नक असेच राहते.
संरेखन
डावीकडे संरेखित
मध्यभागी संरेखित
उजवीकडे संरेखित
शीर्षकेही संरेखित करता येतात.
सूच्या
बुलेट सूची
रिकाम्या ओळीवर - लिहून स्पेस दाबा — तिथेच बुलेट सूची तयार होते.
बुलेट आयटम
Tab / Shift+Tab ने आत आणि बाहेर इंडेंट करा.
क्रमांकित सूची
रिकाम्या ओळीवर 1. लिहून स्पेस दाबल्यावर क्रमांकित सूची तयार होते.
पहिला
दुसरा
तिसरा
तपासणी सूची
रिकाम्या ओळीवर [ ] किंवा [x] लिहून स्पेस दाबल्यावर तपासणी सूची तयार होते.
पूर्ण झालेले काम
राहिलेले काम
तक्ता
टूलबारमधील तक्ता बटणावर क्लिक करून तक्ता तयार करा, नंतर ओळी आणि स्तंभ जोडा, हटवा किंवा एकत्र करा.
स्तंभ क्रमवारी
पूर्वावलोकन उघडा; नंतर अनुक्रमे साठा आणि किंमत या शीर्षक सेलवर क्लिक करा.
मॉडेल | साठा | किंमत | वजन |
|---|---|---|---|
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% असू शकते आणि प्रतिमा डावीकडे, मध्यभागी किंवा उजवीकडे ठेवता येते.
YouTube
अपलोड
प्रतिमा किंवा फाइल संपादकावर ओढून टाकून पाहा.
येथील अपलोड नमुना आहे; सेटिंगद्वारे तो आपल्या सर्व्हरशी जोडला जातो.
अपलोड अयशस्वी झाल्यास प्रतिमा किंवा फाइल संपादकातून काढली जाते.
अवतरण
रिकाम्या ओळीवर > आणि space दाबल्याने अवतरण तयार होते.
ते अनेक ओळींमध्ये असू शकते.
कोड
रिकाम्या ओळीवर ``` लिहून space किंवा enter दाबल्यास कोड बॉक्स तयार होतो.
```java प्रमाणे भाषा लिहून space किंवा enter दाबल्यास ती भाषा असलेला कोड बॉक्स तयार होतो.
import { createNabiWith, defaultWings } from 'nabi-note'
const { nabi } = createNabiWith(defaultWings)
const html = nabi.getHtml()तपशील
तपशीलात सारांश आणि मुख्य मजकूर असतो.
तो मिटलेल्या किंवा उघड्या स्थितीत जतन करायचा हे निवडता येते.
कळफलक शॉर्टकट
Shift पटकन दोनदा दाबा; प्रत्येक सुविधेचा शॉर्टकट साधनपट्टीत दिसेल.
आपोआप स्वरूपण
उदाहरण | क्रिया कळ | परिणाम |
|---|---|---|
# | Space | शीर्षक |
- | Space | बुलेट सूची |
1. | Space | क्रमांकित सूची |
[ ] · [x] | Space | कामांची सूची |
> | Space | अवतरण |
``` · ```ts | Space · Enter | कोड चौकट |
--- | Enter | विभाजक |
https://… | Space · Enter | दुवा |
आउटपुट कार्ये
कार्य | परिणाम |
|---|---|
getHtml() | HTML |
getJson() | JSON |
DOM शिवायही चालते
JSON मधून HTML तयार करण्यासाठी DOM ची गरज नसते.
सर्व्हर (Node.js) जतन केलेले NABI TREE वाचून त्याच नियमांनुसार HTML तयार करू शकतो.
मोबाइलस्नेही
मोबाइल UI — प्रतिसादक्षम मांडणी मोबाइल UI सांभाळते.
मोबाइल कळफलकाची जागा — कळफलक उघडल्यावर त्याची उंची मांडणीत धरली जाते.
लवचिक आकारमान — प्रत्येक आकार rem मध्ये लिहिला आहे.
अनेक भाषा — अनेक भाषांना समर्थन आहे.
सानुकूलन
तुमची स्वतःची विंग — हवी असलेली सुविधा स्वतः तयार करून नोंदवा.
तुमचे स्वतःचे CSS — रंग, कोपरे आणि अंतर ही सर्व --nabi-* म्हणून ठरवलेली आहेत; dark, light किंवा इतर कोणतीही theme तुम्ही ठरवू शकता.
मुक्त स्रोत — GitHub वर मुक्त स्रोत म्हणून उपलब्ध आहे.
दस्तऐवज वाचा → nabi.saro.me
npm install nabi-noteimport {
createNabiWith, mountSurface, mountToolbar, mountContextToolbar,
mountHints, watchSettle, defaultWings, mountUpload, mountUploadView,
browserFileStore, mountFile, parseNodes, mountViewTools,
browserHistoryStorage, mountLocalHistory, openHistoryPanel,
} from 'nabi-note'
import { mountDiffWing } from 'nabi-note/diff'
// 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 { nabi, registry } = createNabiWith(selected, { ask })
// 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 })
const upload = mountUpload({
nabi, root: content,
// 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), parse: parseNodes, locale: 'mr', name: () => 'note' })
const history = mountLocalHistory({ nabi, storage: browserHistoryStorage(window) })
const diff = mountDiffWing({ nabi, registry, surface: content, locale: 'mr' })
// The locale also sets the direction — Arabic and Urdu run right to left
mountSurface({ nabi, registry, root: content, locale: 'mr', fileSink: upload.take })
const settle = watchSettle(document, { surface: content })
const shared = { nabi, registry, surface: content, settle, locale: 'mr' }
// 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: 'mr', 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()))