NABI NOTE
திறந்த மூல WYSIWYG தொகுப்பி
NABI NOTE என்பது திறந்த மூல WYSIWYG தொகுப்பி. வடிவமைப்பு, சீரமைப்பு, அட்டவணை, பதிவேற்றம் உள்ளிட்ட அம்சங்கள் மையத்திலிருந்து wings எனும் தனித்தனி தொகுதிகளாகப் பிரிக்கப்பட்டுள்ளன. தேவையான wings-ஐ மட்டும் தேர்ந்து தொகுப்பியை அமைக்கலாம்; நீங்களே உருவாக்கிய wings-ஐயும் இணைக்கலாம். இது எளிய JavaScript-ல் எழுதப்பட்டதால் React அல்லது Vue போன்ற கட்டமைப்புகளிலும் பயன்படுத்தலாம். build அமைப்பு இல்லாத பக்கங்களில் CDN நூலகத்துடன் உடனே தொடங்கலாம். இதன் சொந்த ஆவண வடிவமான NABI TREE, உலாவி DOM இல்லாத Node.js சூழலிலும் HTML-ஆக மாற்றலாம். உள்ளீட்டு ஆவணங்கள் பதிவுசெய்யப்பட்ட விதிகளால் சரிசெய்யப்படுகின்றன; HTML உருவாகும்போது உரை, பண்புகள் escape செய்யப்படுகின்றன, இணைப்பு முகவரிகள் சரிபார்க்கப்படுகின்றன. ஆனால் தனிப்பயன் wings மற்றும் சேவையகத் தரவை பயன்பாட்டின் பாதுகாப்புக் கொள்கைப்படி தனியாக ஆய்வு செய்ய வேண்டும். 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.5m2 அடிக்குறிப்பு இவ்வாறு சேர்க்கப்படும்.1
நீர் H2O.
உரை நிறம் · முன்னிலைப்படுத்தல்
ஒளி மற்றும் இருண்ட நிலை இரண்டிலும் படிக்கத் தகுந்தவாறு வண்ணத் தட்டு தேர்ந்தெடுக்கப்பட்டுள்ளது.
உரை நிறம் பச்சை · பவளம் · வயலட் · அம்பர் · நீலம்
முன்னிலைப்படுத்தல் மஞ்சள் · பச்சை · சியான் · இளஞ்சிவப்பு · ஊதா · ஆரஞ்சு
இணைப்பு
முகவரியை உள்ளிடுங்கள்; அது ஒரு இணைப்பு.
http://, https:// URL-களையும் . அல்லது /-இல் தொடங்கும் இதே தளப் பாதைகளையும் பயன்படுத்தலாம். javascript: போன்ற முகவரிகள் அனுமதிக்கப்படாது.
உதாரணமாக https://nabi.saro.me எனத் தட்டச்சிட்டு இடைவெளி அல்லது Enter அழுத்துங்கள்; இங்கே காண்பதுபோல் தானாக மாற்றப்படும்.
இணைப்பு திறப்பு
ஆவணம் இணைப்பு முகவரியை மட்டுமே சேமிக்கிறது; அதை காட்டும் பக்கமே இணைப்புகள் எப்படித் திறக்கப்படும் என்பதை முடிவு செய்கிறது.
இணைப்பு கோப்பு
படங்கள் அல்லாத கோப்புகள் கீழுள்ளதைப் போன்ற இணைப்புக் கோப்பு இணைப்புகளாக இருக்கும்.
இணைப்பு கோப்பு இணைப்பு ஆவணத்தில் சேமிக்கப்படும்.
சீரமைப்பு
இடப்புறச் சீரமைப்பு
நடுவண் சீரமைப்பு
வலப்புறச் சீரமைப்பு
தலைப்புகளுக்கு சீரமைப்பைப் பயன்படுத்த முடியாது.
பட்டியல்கள்
புள்ளிப் பட்டியல்
காலி வரியில் - எனத் தட்டச்சிட்டு இடைவெளி அழுத்தினால் அது புள்ளிப் பட்டியலாக மாறும்.
இது ஒரு புள்ளிப் பட்டியல் உருப்படி
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 | TBD | 12,999 | 2.4 kg |
விலை நெடுவரிசையின் மதிப்புகள் அனைத்தும் எண்கள் என்பதால் எண் மதிப்பின்படி வரிசைப்படுத்தப்படும்.
கையிருப்பு நெடுவரிசையில் எண்களும் உரையும் இருப்பதால் உரைச் சரங்களின்படி வரிசைப்படுத்தப்படும்.
பிரிப்பான்
--- எனத் தட்டச்சிட்டு Enter அழுத்தினால் அது பிரிப்பானாக மாறும்.
படம்
அகலத்தை 30% முதல் 100% வரை அமைக்கலாம்; இடது, நடு அல்லது வலப்புறத்தில் வைக்கலாம்.
மிதக்கும் பகுதி
ஒரு பார்வையில்
உரை, படங்கள் மற்றும் அட்டவணைகளுக்கான சிறிய துணைப் பகுதி.
அமைவிடம் | வலது |
அதிகபட்ச அகலம் | 40% |
முதன்மை உரையின் பக்கத்தில் கூடுதல் விளக்கங்கள் அல்லது சிறிய ஆதாரங்களை வைக்க மிதக்கும் பகுதியைப் பயன்படுத்துங்கள். அகலமான ஆவணத்தில் இந்த உரை பகுதியின் பக்கவாட்டில் செல்லும். உள்ளே கிளிக் செய்து அதே திருத்தியில் உரையை மாற்றவும் படங்கள் அல்லது அட்டவணைகளைச் சேர்க்கவும் முடியும்.
பண்புக் கருவிகளைத் திறக்க இடஞ்சுட்டியைப் பகுதிக்குள் வையுங்கள். இடது அல்லது வலது அமைவிடத்தை மாற்றி, உரைக்கு ஏற்ற அதிகபட்ச அகலத்தை 20, 30, 40 அல்லது 50% ஆகத் தேருங்கள். ஒட்டப்படும் அட்டவணைகளும் படங்களும் பகுதிக்குள்ளேயே இருக்கும்.
தேர்ந்தெடுத்த பத்திகளையும் ஒரு பகுதிக்குள் வைக்கலாம். அகலத்திற்கு அடுத்துள்ள பகுதியை நீக்கும் பொத்தான் உள்ளடக்கத்தை முதன்மை ஆவணத்தில் விட்டுவைக்கும். முன்னோட்டம் திருத்தத்திற்கான புள்ளிக் கோட்டை மறைக்கும்; குறுகிய ஆவணத்திலும் அச்சிடும்போதும் எல்லாம் ஒரே நெடுவரிசையில் தொடரும்.
YouTube
பதிவேற்றம்
படம் அல்லது கோப்பை தொகுப்பிக்குள் இழுத்து விட முயற்சிக்கவும்.
இந்த மாதிரி கோப்புகளை உண்மையான சேவையகத்திற்கு அனுப்பாது. சேவையகத்தில் சேமிக்க உங்கள் பயன்பாட்டில் பதிவேற்றியை இணைக்கவும்.
படத் தேர்வியைத் திறந்தபின் அல்லது பதிவேற்றத்தைத் தொடங்கியபின் இடஞ்சுட்டியை மட்டும் நகர்த்தினால் அசல் இடத்திலேயே செருகப்படும். காத்திருக்கும்போது ஆவணத்தைத் திருத்தினால் செருகல் ரத்தாகி அறிவிப்பு காட்டப்படும். கலத்தில் தொடங்கிய பதிவேற்றத்தின் முன்னேற்றமும் முடிவும் அதே கலத்தில் இருக்கும்.
மேற்கோள்
காலி வரியில் > எனத் தட்டச்சிட்டு இடைவெளி அழுத்தினால் மேற்கோள் பெட்டி கிடைக்கும்.
அது பல வரிகளுக்கு நீளலாம்.
நிரல்
காலி வரியில் ``` எனத் தட்டச்சிட்டு இடைவெளி அல்லது Enter அழுத்தினால் நிரல் பெட்டி கிடைக்கும்.
```java போல மொழியையும் எழுதி இடைவெளி அல்லது Enter அழுத்தினால் அந்த மொழி அமைந்த நிரல் பெட்டி கிடைக்கும்.
import { createNabiWith, defaultWings } from 'nabi-note'
const { nabi } = createNabiWith(defaultWings)
const html = nabi.getHtml()விவரங்கள்
விவரங்கள் சுருக்கமும் உட்பகுதியும் கொண்டது.
மடக்கியோ திறந்தோ சேமிப்பதைக் தேர்ந்தெடுக்கலாம்.
கருவிப்பட்டை
தலைப்புகள், உரை வடிவமைப்பு, சீரமைப்பு, பட்டியல்கள், செருகல் மற்றும் ஆவணக் கருவிகள் குழுக்களாக உள்ளன. கணினியில் கருவிகள் விரிந்திருக்கும்; கைப்பேசியில் விரைவுக் கருவிகளும் முழுக் கருவித் தட்டும் கிடைக்கும். தேர்ந்தெடுத்த அட்டவணை அல்லது மிதக்கும் பகுதியின் பண்புகள் கீழே தோன்றும்.
குறுக்குவழிகள்
Shift ஐ விரைவாக இருமுறை அழுத்துங்கள்; விசைப்பலகையால் கருவிகளைத் தேரலாம். கணினியில் விரிந்த கருவிப்பட்டையிலும் கைப்பேசியில் முழுக் கருவித் தட்டிலும் செல்லுங்கள். Tab மூலம் குழுவை மாற்றி, அம்புக்குறி விசைகளால் கருவியைத் தேர்ந்து Enter மூலம் இயக்குங்கள்.
மேற்கோள், நிரல் அல்லது மடிக்கக்கூடிய தொகுதியின் முடிவில் Enter ஐ விரைவாக இருமுறை அழுத்தினால் வெளியே வரலாம். இருமுறை அழுத்துவதற்கான இயல்புநிலை இடைவெளி 180ms.
தானியங்கு வடிவமைப்பு
எடுத்துக்காட்டு | செயல் விசை | முடிவு |
|---|---|---|
# | இடைவெளி | தலைப்பு |
- | இடைவெளி | புள்ளிப் பட்டியல் |
1. | இடைவெளி | எண் பட்டியல் |
[ ] · [x] | இடைவெளி | சரிபார்ப்புப் பட்டியல் |
> | இடைவெளி | மேற்கோள் |
``` · ```ts | இடைவெளி · Enter | நிரல் பெட்டி |
--- | Enter | பிரிப்பான் |
https://… | இடைவெளி · Enter | Link |
வெளியீட்டு செயல்பாடுகள்
செயல்பாடு | முடிவு |
|---|---|
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('ta')
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')