Yapışkan araç çubuğu Mobil klavye boşluğuTemel yazı tipiOfset

NABI NOTE

Açık kaynaklı bir WYSIWYG düzenleyici

NABI NOTE açık kaynaklı bir WYSIWYG düzenleyicidir. Biçimlendirme, hizalama, tablolar, yükleme ve diğer özellikleri çekirdekten wings adı verilen bağımsız modüllere ayrılmıştır. Bir düzenleyici oluşturmak için yalnızca ihtiyacınız olan kanatları seçebilir ve kendiniz oluşturduğunuz kanatları bağlayabilirsiniz. Düz JavaScript ile yazıldığı için React veya Vue gibi çerçevelerle kullanılabilir. Derleme kurulumu olmayan sayfalarda CDN kitaplığı. Kendi belge biçimi olan NABI TREE, tarayıcı DOM’u olmayan Node.js ortamlarında bile HTML’ye dönüştürülebilir. Girdi belgeleri kayıtlı kurallarla onarılır ve HTML oluşturulurken metin ile öznitelikler kaçırılır, bağlantı adresleri denetlenir. Ancak özel kanatlar ve sunucudan gelen veriler uygulamanın güvenlik politikasına göre ayrıca gözden geçirilmelidir. CSS değişkenleri ve rem tabanlı düzen, temayı ve boyutu ayarlamanızı sağlar; ayrıca karanlık mod ve çok sayıda dil için yazı tipi ayarları da sunar. Tablo sıralama, yerel geçmiş ve yapay zekâ destekli belge çalışmaları da aynı belge modeli üzerinde sürer.

Yazı tipi

Sans serif (varsayılan), serif, eş aralıklı ve el yazısı aileleri; her yazı sistemi için yazı tiplerini sıralar. Böylece hangi dilde yazarsanız yazın o ailenin görünümü korunur; ailede el yazısı bulunmayan bir yazı sistemi tarayıcının kendi yazı tipine döner. Varsayılan yazı tipini barındıran sayfa belirler.

Aşağıda her aile birçok dilde gösterilmiştir.

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

Yazı boyutu

Çok küçük

Küçük

Büyük

Çok büyük

Başlık

Boş bir satırda # yazıp ardından boşluk tuşuna basarak hemen başlığa dönüştürün.

H1

H2

H3

H4

H5

H6

Kalın · İtalik · Altı çizili · Üstü çizili

Kalın italik altı çizili ~~üstü çizili~~ metin örneği.

~~Birlikte de kullanılabilir.~~

Üst ve alt simge

Alan 3,5 m²; dipnot da böyle eklenir.¹

Su H₂O’dur.

Metin rengi · Vurgu

Palet, açık ve koyu modda okunaklı kalacak şekilde seçilmiştir.

Metin rengi Yeşil · Mercan · Menekşe · Kehribar · Mavi

Vurgu Sarı · Yeşil · Camgöbeği · Pembe · Mor · Turuncu

Bağlantı

Bir adres girin; bağlantıya dönüşür.

http:// ve https:// URL’leri ile . veya / ile başlayan aynı site yollarını kullanabilirsiniz. javascript: gibi adreslere izin verilmez.

Örneğin https://nabi.saro.me yazıp boşluk veya Enter’a basın; burada gördüğünüz gibi kendiliğinden dönüşür.

Bağlantıyı açma

Belge yalnızca bağlantı adresini saklar; bağlantının nasıl açılacağını belgeyi gösteren sayfa belirler.

Ek bağlantısı

Görsel dışındaki bir şeyi yüklemek, aşağıdaki gibi dosya biçimli bir bağlantı bırakır.

Ek olarak kalır.

Hizalama

Sol hizalı

Ortalanmış

Sağ hizalı

Başlıklar da hizalanabilir.

Listeler

Madde işaretli liste

Boş satırda - yazıp boşluk tuşuna basın; hemen madde işaretli listeye dönüşür.

Bu bir liste maddesidir
- Tab / Shift+Tab girintiyi artırır ve azaltır.

Numaralı liste

Boş satırda 1. yazıp boşluk tuşuna basarak numaralı liste oluşturun.

Birinci
İkinci
Üçüncü

Kontrol listesi

Boş satırda [ ] veya [x] yazıp boşluk tuşuna basarak kontrol listesi oluşturun.

Bu madde işaretlenmiştir.
Bu henüz işaretlenmedi.

Tablo

Tablo oluşturmak için araç çubuğundaki tablo düğmesine tıklayın; ardından satır ve sütun ekleyin, silin veya birleştirin.

Sütun sıralama

Önizleme’yi açın; Stok ve Fiyat başlık hücrelerine sırayla tıklayın.

Model	Stok	Fiyat	Ağırlık
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	Belirlenecek	12,999	2.4 kg

Fiyat yalnızca sayılardan oluştuğu için sayısal sıralanır.

Stok, son hücrede harf bulunduğu için metin olarak sıralanır.

Ayırıcı

--- yazıp Enter’a basarak ayırıcıya dönüştürün.

Görsel

Genişlik %30 ile %100 arasında ayarlanabilir; görsel sola, ortaya veya sağa yerleştirilebilir.

YouTube

Yükleme

Düzenleyiciye bir görsel veya dosya sürüklemeyi deneyin.

Buradaki yükleme bir makettir; ayarla kendi sunucunuza bağlanır.

Yükleme başarısız olursa görsel veya dosya düzenleyiciden kaldırılır.

Alıntı

Boş satırda > yazıp boşluk tuşuna basarak alıntı kutusu oluşturun.
Birden çok satıra yayılabilir.

Kod

Boş satırda ``` yazıp boşluk veya Enter tuşuna basarak kod kutusu oluşturun.

```java gibi dili de yazıp boşluk veya Enter’a basarak o dilin uygulandığı bir kod kutusu oluşturun.

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

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

Ayrıntılar

Ayrıntılar, bir özet ve gövdeden oluşur.

Katlanmış veya açık kaydedilmeyi seçebilirsiniz.

Kısayollar

Shift tuşuna hızla iki kez basın; araç çubuğunda özellik kısayolları görünür.

Otomatik biçimlendirme

Örnek	Eylem tuşu	Sonuç
#	Boşluk	Başlık
-	Boşluk	Madde işaretli liste
1.	Boşluk	Numaralı liste
[ ] · [x]	Boşluk	Kontrol listesi
>	Boşluk	Alıntı
``` · ```ts	Boşluk · Enter	Kod kutusu
---	Enter	Ayırıcı
https://…	Boşluk · Enter	Bağlantı

Çıktı işlevleri

İşlev	Sonuç
getHtml()	HTML
getJson()	JSON

DOM olmadan çalışır

JSON’dan HTML’ye dönüştürme DOM gerektirmez.

Bir sunucu (Node.js), saklanan NABI TREE’yi okuyup aynı kurallarla HTML oluşturabilir.

Mobil uyumlu

Mobil arayüz — duyarlı düzen mobil arayüzü taşır.
Mobil klavye boşluğu — klavye açıldığında yüksekliği hesaba katılır.
Akışkan boyutlandırma — her boyut rem ile yazılır.
Birçok dil — birden çok dili destekler.

Özelleştirme

Kendi kanadınız — gereksinim duyduğunuz özelliği geliştirin ve kaydedin.
Kendi CSS’niz — renkler, köşeler ve boşluklar --nabi-* ile tanımlanır; koyu, açık ve diğer temaları siz belirlersiniz.
Açık kaynak — GitHub’da açık kaynaklıdır.

Belgeleri okuyun → nabi.saro.me

HTMLDüzenleyici yükleniyor…

JSONnabi-treeDüzenleyici yükleniyor…

Yükle

npm install nabi-note

Kod

import {
  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: 'tr', name: () => 'note' })
const history = mountLocalHistory({ nabi, storage: browserHistoryStorage(window) })
const diff = mountDiffWing({ nabi, registry, surface: content, locale: 'tr' })

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

const settle = watchSettle(document, { surface: content })
const shared = { nabi, registry, surface: content, settle, locale: 'tr' }
// 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: 'tr', 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()))