అంటుకునే టూల్‌బార్ మొబైల్ కీబోర్డ్ ఇన్‌సెట్ప్రాథమిక అక్షరరూపంఆఫ్‌సెట్

NABI NOTE

ఓపెన్ సోర్స్ WYSIWYG ఎడిటర్

NABI NOTE అనేది ఓపెన్ సోర్స్ WYSIWYG ఎడిటర్. ఆకృతీకరణ, సమలేఖనం, పట్టికలు, అప్‌లోడ్ వంటి ఫీచర్లు కోర్ నుంచి వేరుగా వింగ్స్ అనే స్వతంత్ర మాడ్యూల్‌లుగా ఉంటాయి. కావలసిన వింగ్స్‌ను ఎంచుకుని ఎడిటర్‌ను రూపొందించవచ్చు; మీ స్వంత వింగ్‌ను కూడా కలపవచ్చు. సాధారణ JavaScriptలో వ్రాసినందున React, Vue వంటి ఫ్రేమ్‌వర్క్‌లలో వాడవచ్చు. బిల్డ్ అమరిక లేని పేజీల్లో 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:// URLలతో పాటు . లేదా /తో మొదలయ్యే ఇదే సైట్ మార్గాలను వాడవచ్చు; 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	తెలియాల్సి ఉంది	12,999	2.4 kg

ధర నిలువు వరుసలోని విలువలన్నీ సంఖ్యలే కాబట్టి సంఖ్యల విలువ ఆధారంగా క్రమబద్ధీకరిస్తారు.

నిల్వ నిలువు వరుసలో సంఖ్యలు, వచనం రెండూ ఉన్నందున వచన స్ట్రింగ్‌ల ఆధారంగా క్రమబద్ధీకరిస్తారు.

విభాజకం

--- రాసి ఎంటర్ నొక్కితే విభాజకం అవుతుంది.

చిత్రం

వెడల్పు 30% నుంచి 100%; ఎడమ, మధ్య లేదా కుడివైపు పెట్టవచ్చు.

ఫ్లోట్ ప్రాంతం

ఒక చూపులో

వచనం, చిత్రాలు, పట్టికల కోసం చిన్న సహాయక ప్రాంతం.

స్థానం	కుడి
గరిష్ఠ వెడల్పు	40%

ప్రధాన వచనం పక్కన అదనపు వివరణలు లేదా చిన్న వనరులు ఉంచడానికి ఫ్లోట్ ప్రాంతం వాడండి. వెడల్పైన పత్రంలో ఈ వచనం ప్రాంతం పక్కగా ప్రవహిస్తుంది. లోపల క్లిక్ చేసి అదే ఎడిటర్‌లో వచనాన్ని సవరించండి, చిత్రాలు లేదా పట్టికలను చేర్చండి.

లక్షణాల సాధనాలు తెరవడానికి కర్సర్‌ను ప్రాంతంలో ఉంచండి. ఎడమ లేదా కుడి స్థానాన్ని మార్చి, వచనానికి సరిపోయే గరిష్ఠ వెడల్పును 20, 30, 40 లేదా 50%గా ఎంచుకోండి. అతికించిన పట్టికలు, చిత్రాలు కూడా ప్రాంతంలోనే ఉంటాయి.

ఎంచుకున్న పేరాలను కూడా ఒక ప్రాంతంలో చుట్టవచ్చు. వెడల్పు పక్కన ఉన్న ప్రాంతాన్ని విడదీసే బటన్ లోపలి విషయాన్ని ప్రధాన పత్రంలోనే ఉంచుతుంది. ప్రివ్యూలో సవరణ కోసం ఉన్న చుక్కల గీత దాగుతుంది; ఇరుకైన పత్రంలో లేదా ముద్రణలో అన్నీ ఒకే నిలువు వరుసలో కొనసాగుతాయి.

YouTube

అప్‌లోడ్

చిత్రం లేదా ఫైల్‌ను ఎడిటర్‌పైకి లాగి చూడండి.

ఈ డెమో ఫైళ్లను నిజమైన సర్వర్‌కు పంపదు. సర్వర్‌లో సేవ్ చేయడానికి మీ యాప్‌లో అప్‌లోడర్‌ను అనుసంధానించండి.

చిత్ర ఎంపికను తెరిచిన తర్వాత లేదా అప్‌లోడ్ మొదలుపెట్టిన తర్వాత కర్సర్‌ను మాత్రమే కదిపితే అసలు స్థానంలోనే చేర్చబడుతుంది. వేచి ఉండగా పత్రాన్ని సవరిస్తే చేర్చడం రద్దై నోటీసు కనిపిస్తుంది. సెల్‌లో ప్రారంభించిన అప్‌లోడ్ పురోగతి, ఫలితం కూడా అదే సెల్‌లో ఉంటాయి.

ఉల్లేఖనం

ఖాళీ పంక్తిలో > రాసి స్పేస్ నొక్కితే ఉల్లేఖన పెట్టె వస్తుంది.
ఇది అనేక పంక్తులకు విస్తరించవచ్చు.

కోడ్

ఖాళీ పంక్తిలో ``` రాసి స్పేస్ లేదా Enter నొక్కితే కోడ్ పెట్టెగా మారుతుంది.

```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 యూనిట్లను ఉపయోగిస్తుంది.
బహుళ భాషలు — భాష, వచన దిశకు అనుగుణంగా లోకేల్, అక్షరశైలిని సెట్ చేయవచ్చు.

అనుకూలీకరణ

మీ సొంత వింగ్ — ఏదైనా సదుపాయం అవసరమైతే మీరే తయారు చేసి అనుసంధానించవచ్చు.
మీ సొంత 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('te')
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')