NABI NOTE
एक मुक्त-स्रोत WYSIWYG संपादक
NABI NOTE एक ओपन-सोर्स WYSIWYG संपादक है जिसमें स्वरूपण, संरेखण, तालिका और अपलोड जैसी सुविधाएँ कोर से अलग कर स्वतंत्र «wing» मॉड्यूलों में रखी गई हैं। ज़रूरत के wing चुनकर संपादक बनाया जा सकता है और अपने बनाए wing भी जोड़े जा सकते हैं। यह शुद्ध JavaScript में लिखा है, इसलिए React या Vue जैसे फ़्रेमवर्क में भी इस्तेमाल हो सकता है। बिना बिल्ड सेटअप वाले पन्नों पर CDN पुस्तकालय से तुरंत शुरू किया जा सकता है। इसका अपना दस्तावेज़ प्रारूप NABI TREE ब्राउज़र DOM के बिना भी Node.js परिवेश में HTML में बदला जा सकता है। इनपुट दस्तावेज़ पंजीकृत नियमों से ठीक किए जाते हैं और HTML बनाते समय टेक्स्ट व विशेषताओं को एस्केप कर लिंक पते जाँचे जाते हैं। फिर भी अपने बनाए wing और सर्वर से मिले डेटा को अनुप्रयोग की सुरक्षा नीति के अनुसार अलग से जाँचना चाहिए। 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.5 मी2 है, और पाद-टिप्पणी ऐसे लगती है।1
पानी H2O है।
अक्षर का रंग · हाइलाइटर
रंग ऐसे चुने गए हैं कि उजले और गहरे, दोनों में पढ़ने में सहज रहें।
अक्षर का रंग हरा · मूँगा · बैंगनी · अंबर · नीला
हाइलाइटर पीला · हरा · आसमानी · गुलाबी · जामुनी · नारंगी
कड़ी
पता डालिए और वह कड़ी बन जाता है।
आप http:// और https:// पतों के साथ उसी साइट के . या / से शुरू होने वाले पथ भी इस्तेमाल कर सकते हैं। javascript: जैसे पते स्वीकार नहीं किए जाते।
जैसे https://nabi.saro.me लिखकर स्पेस या एंटर दबाइए — यह अपने आप बदल जाता है, जैसा यहाँ दिख रहा है।
लिंक खोलना
दस्तावेज़ में केवल लिंक का पता सहेजा जाता है; लिंक कैसे खुलेगा, यह दस्तावेज़ दिखाने वाला पेज तय करता है।
संलग्नक की कड़ी
चित्रों के अलावा अन्य फ़ाइलें नीचे दिखाए गए संलग्नक लिंक के रूप में रहती हैं।
संलग्नक का लिंक दस्तावेज़ में सहेजा जाता है।
संरेखण
बाएँ
बीच में
दाएँ
शीर्षकों पर संरेखण लागू नहीं किया जा सकता।
सूचियाँ
बिंदु-सूची
खाली पंक्ति में - लिखकर स्पेस दबाइए — वहीं बिंदु-सूची बन जाती है।
यह एक बिंदु है
Tab / Shift+Tab से भीतर और बाहर किया जाता है।
क्रमांकित सूची
खाली पंक्ति में 1. लिखकर स्पेस दबाइए — क्रमांकित सूची बन जाती है।
पहला
दूसरा
तीसरा
जाँच-सूची
खाली पंक्ति में [ ] या [x] लिखकर स्पेस दबाइए — जाँच-सूची बन जाती है।
यह काम हो चुका है।
यह अभी बाकी है।
सारणी
सेल में कई अनुच्छेद और ब्लॉक रख सकते हैं तथा पृष्ठभूमि के रंग से सामग्री अलग पहचान सकते हैं। नीचे की तालिका के पाठ और चित्र सीधे बदलकर देखें।
संदर्भ सामग्री | काम के नोट्स |
|---|---|
 चित्र और उसका विवरण एक ही सेल में हैं। | लचीले अनुच्छेदनया अनुच्छेद बनाने के लिए Enter और उसी अनुच्छेद में नई पंक्ति के लिए Shift+Enter दबाएँ। |
| संपादन के सुझाव देखने के लिए क्लिक करेंसेल में संक्षिप्त करने वाले ब्लॉक, उद्धरण, कोड और वीडियो भी रख सकते हैं। सेल मर्ज करने पर हर सेल की सामग्री क्रम में सुरक्षित रहती है। |
सेल में क्लिक करने पर पृष्ठभूमि रंग और पंक्ति व स्तंभ के उपकरण दिखते हैं। कई सेल चुनकर रंग और संरेखण एक साथ बदल सकते हैं। पूरी तालिका की जगह बदलने के लिए “पूरी तालिका चुनें” चुनकर संरेखण उपकरण इस्तेमाल करें।
रंग या कई ब्लॉक वाली तालिकाएँ 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 | तय होना बाकी | 12,999 | 2.4 kg |
दाम कॉलम के सभी मान संख्याएँ हैं, इसलिए यह संख्यात्मक क्रम में छँटता है।
भंडार कॉलम में संख्याएँ और पाठ दोनों हैं, इसलिए यह पाठ की स्ट्रिंग के आधार पर छँटता है।
विभाजक रेखा
--- लिखकर एंटर दबाइए — विभाजक रेखा बन जाती है।
चित्र
चौड़ाई 30% से 100% तक रखी जा सकती है और वह बाएँ, बीच या दाएँ बैठता है।
फ़्लोट क्षेत्र
एक नज़र में
पाठ, चित्र और तालिकाओं के लिए छोटा सहायक क्षेत्र।
स्थिति | दायाँ |
अधिकतम चौड़ाई | 40% |
मुख्य पाठ के साथ अतिरिक्त विवरण या छोटी संदर्भ सामग्री रखने के लिए फ़्लोट क्षेत्र इस्तेमाल करें। चौड़े दस्तावेज़ में यह पाठ क्षेत्र के बगल में बहता है। अंदर क्लिक करके उसी संपादक में पाठ बदलें और चित्र या तालिकाएँ जोड़ें।
गुण उपकरण खोलने के लिए कर्सर क्षेत्र में रखें। बाईं या दाईं स्थिति बदलें और पाठ के अनुसार 20, 30, 40 या 50% अधिकतम चौड़ाई चुनें। चिपकाई गई तालिकाएँ और चित्र भी क्षेत्र के अंदर रहते हैं।
चुने हुए अनुच्छेदों को भी क्षेत्र में लपेट सकते हैं। चौड़ाई के पास का क्षेत्र हटाने वाला बटन सामग्री मुख्य दस्तावेज़ में रहने देता है। पूर्वावलोकन में संपादन की बिंदुदार सीमा छिप जाती है; संकरे दस्तावेज़ और प्रिंट में सामग्री एक स्तंभ में चलती है।
YouTube
अपलोड
कोई चित्र या फ़ाइल संपादक पर खींचकर देखिए।
यह डेमो फ़ाइलें वास्तविक सर्वर पर नहीं भेजता। सर्वर पर सहेजने के लिए अपने अनुप्रयोग में अपलोडर जोड़ें।
चित्र चयनकर्ता खोलने या अपलोड शुरू करने के बाद केवल कर्सर हिलाने पर सामग्री मूल स्थान पर ही जुड़ती है। प्रतीक्षा के दौरान दस्तावेज़ बदलने पर जोड़ना रद्द होता है और सूचना दिखती है। सेल में शुरू किए गए अपलोड की प्रगति और परिणाम भी उसी सेल में रहते हैं।
उद्धरण
खाली पंक्ति में > लिखकर स्पेस दबाइए — उद्धरण का खाना बन जाता है।
यह कई पंक्तियों तक चल सकता है।
कोड
खाली पंक्ति में ``` लिखकर स्पेस या एंटर दबाइए — कोड का खाना बन जाता है।
भाषा भी साथ लिखिए, जैसे ```java, फिर स्पेस या एंटर — खाने पर वही भाषा लग जाती है।
import { createNabiWith, defaultWings } from 'nabi-note'
const { nabi } = createNabiWith(defaultWings)
const html = nabi.getHtml()मोड़
मोड़ शीर्षक और भीतरी सामग्री से बनता है।
आप तय कर सकते हैं कि यह बंद हालत में सहेजा जाए या खुली।
टूलबार
शीर्षक, पाठ स्वरूप, संरेखण, सूची, जोड़ने और दस्तावेज़ के उपकरण समूहों में हैं। कंप्यूटर पर उपकरण खुले दिखते हैं; मोबाइल पर त्वरित उपकरण और पूरा पैलेट मिलता है। चुनी गई तालिका या फ़्लोट के गुण टूलबार के नीचे दिखते हैं।
शॉर्टकट
Shift तेज़ी से दो बार दबाएँ ताकि कीबोर्ड से उपकरण चुन सकें। कंप्यूटर पर खुले टूलबार और मोबाइल पर पूरे पैलेट में जाएँ। Tab से समूह बदलें, तीर कुंजियों से उपकरण चुनें और Enter से चलाएँ।
उद्धरण, कोड या संक्षिप्त करने वाले ब्लॉक के अंत में Enter तेज़ी से दो बार दबाकर बाहर आएँ। दो बार दबाने का डिफ़ॉल्ट अंतराल 180ms है।
स्वतः सजावट
उदाहरण | कुंजी | परिणाम |
|---|---|---|
# | स्पेस | शीर्षक |
- | स्पेस | बिंदु-सूची |
1. | स्पेस | क्रमांकित सूची |
[ ] · [x] | स्पेस | जाँच-सूची |
> | स्पेस | उद्धरण |
``` · ```ts | स्पेस · एंटर | कोड का खाना |
--- | एंटर | विभाजक रेखा |
https://… | स्पेस · एंटर | कड़ी |
निर्गम फलन
फलन | परिणाम |
|---|---|
getHtml() | HTML |
getJson() | JSON |
बिना DOM के भी चलता है
NABI TREE से HTML बनाने के लिए DOM की ज़रूरत नहीं।
सर्वर (Node.js) भी सहेजे गए NABI TREE को पढ़कर उन्हीं नियमों से HTML बना सकता है।
मोबाइल के अनुकूल
मोबाइल UI — स्क्रीन की चौड़ाई के अनुसार संपादन टूल व्यवस्थित करता है।
मोबाइल कीबोर्ड समायोजन — कीबोर्ड खुलने पर संपादन क्षेत्र की ऊँचाई समायोजित करता है।
लचीला आकार — ज़ूम बढ़ाने और घटाने के अनुरूप ढलने के लिए मुख्य लेआउट में rem इकाइयों का उपयोग करता है।
कई भाषाएँ — भाषा और पाठ की दिशा के अनुसार लोकेल और टाइपफ़ेस सेट किए जा सकते हैं।
अपने मन का रूप
अपना wing — किसी सुविधा की ज़रूरत हो तो आप उसे खुद बनाकर जोड़ सकते हैं।
अपना CSS — मुख्य रंगों, कोनों और अंतराल को --nabi-* टोकन से हल्के और गहरे मोड के अनुरूप बदल सकते हैं।
मुक्त स्रोत — स्रोत कोड GitHub पर साझा किया जाता है और हम मिलकर इसे विकसित करते हैं।
दस्तावेज़ देखिए → nabi.saro.me
npm install nabi-noteimport {
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('hi')
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')