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ığı ile hemen başlayabilirsiniz. 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 için dile göre yedek yazı tipleri sağlanır. Seçilen aileye uygun yazı tipi yoksa tarayıcının varsayılan yazı tipi kullanılır. Editörün varsayılan yazı tipini barındıran sayfa belirler.

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

산세리프 · ゴシック体 · 无衬线 · 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

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~~ biçimleri aynı karaktere birlikte uygulanabilir.

~~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 olmayan dosyalar, aşağıdaki gibi ek bağlantıları olarak kalır.

Ek bağlantısı belgeye kaydedilir.

Hizalama

Sol hizalı

Ortalanmış

Sağ hizalı

Başlıklara hizalama uygulanamaz.

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

Hücreler birden fazla paragraf ve blok içerebilir; arka plan renkleriyle içerikleri ayırt edebilirsiniz. Aşağıdaki tablonun metnini ve görsellerini doğrudan düzenlemeyi deneyin.

Kaynaklar	Çalışma notları
Bir görsel ve açıklaması aynı hücrede.	Esnek paragraflar Yeni paragraf için Enter, aynı paragrafta satır sonu için Shift+Enter tuşuna basın.
Hücre arka planını değiştirme Listede Tab ile girinti verme Birden fazla hücre seçip aynı rengi uygulama	Düzenleme ipuçları için tıklayın Hücrelere açılır bloklar, alıntılar, kod ve videolar da eklenebilir. Hücreler birleştirildiğinde içerikleri sırayla korunur.

Kaynaklar

Çalışma notları

Bir görsel ve açıklaması aynı hücrede.

Esnek paragraflar

Yeni paragraf için Enter, aynı paragrafta satır sonu için Shift+Enter tuşuna basın.

Hücre arka planını değiştirme
Listede Tab ile girinti verme
Birden fazla hücre seçip aynı rengi uygulama

Düzenleme ipuçları için tıklayın

Hücrelere açılır bloklar, alıntılar, kod ve videolar da eklenebilir.

Hücreler birleştirildiğinde içerikleri sırayla korunur.

Arka plan rengi ile satır ve sütun araçlarını göstermek için hücreye tıklayın. Renk ve hizalamayı birlikte değiştirmek için birden fazla hücre seçin. Tablonun tamamını konumlandırmak için “Tabloyu seç” seçeneğini, ardından hizalama araçlarını kullanın.

Renk veya birden fazla blok içeren tablolar, Markdown olarak kaydedildiğinde de HTML biçiminde korunur.

Hücre arka plan renkleri

Desteklenen tüm hücre arka planları burada gösterilir. Rengini değiştirmek için bir hücreye tıklayın veya arka planı kaldırmak için özellik araçlarında “Varsayılan”ı seçin.

Sarı

yellow

Yeşil

green

Camgöbeği

cyan

Pembe

pink

Mor

purple

Turuncu

orange

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 sütunundaki tüm değerler sayı olduğundan sütun sayısal olarak sıralanır.

Stok sütununda sayılar ve metin bir arada bulunduğundan sütun metin dizelerine göre 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.

Kayan bölge

Bir bakışta

Metin, görsel ve tablolar için küçük bir yardımcı bölge.

Yerleşim	Sağ
En fazla genişlik	40%

Ana metnin yanında ek açıklama veya küçük kaynaklar göstermek için kayan bölgeyi kullanın. Geniş bir belgede bu metin bölgenin yanından akar. Aynı düzenleyicide metni değiştirmek, görsel veya tablo eklemek için içine tıklayın.

Özellik araçlarını açmak için imleci bölgenin içine getirin. Sol ve sağ yerleşim arasında geçiş yapın; metne uygun olacak şekilde en fazla genişliği %20, %30, %40 veya %50 olarak seçin. Yapıştırılan tablolar ve görseller de bölgenin içinde kalır.

Seçili paragrafları da bir bölgenin içine alabilirsiniz. Genişliğin yanındaki bölgeyi kaldırma düğmesi içeriği ana belgede bırakır. Önizlemede düzenleme için kullanılan noktalı çerçeve gizlenir; dar belgelerde ve yazdırmada içerik tek sütunda devam eder.

YouTube

Yükleme

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

Bu demo dosyaları gerçek bir sunucuya göndermez. Sunucuya kaydetmek için uygulamanıza bir yükleyici bağlayın.

Görsel seçiciyi açtıktan veya yükleme başlattıktan sonra yalnızca imleci hareket ettirmek, ilk konuma eklemeyi korur. Beklerken belgeyi düzenlemek eklemeyi iptal eder ve bir bildirim gösterir. Hücrede başlatılan yüklemenin ilerlemesi ve sonucu da o hücrede kalı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.

Araç çubuğu

Başlık, metin biçimi, hizalama, liste, ekleme ve belge araçları gruplara ayrılır. Masaüstünde araçlar açık görünür; mobilde hızlı araçlar ve tam palet bulunur. Seçili tablo veya kayan bölgenin özellikleri araç çubuğunun altında görünür.

Kısayollar

Shift tuşuna hızla iki kez basın ve araçları klavyeyle seçin. Masaüstünde açık araç çubuğunu, mobilde tam paleti gezin. Tab ile grubu değiştirin, ok tuşlarıyla aracı seçin ve Enter ile çalıştırın.

Alıntı, kod veya açılır blok gibi bir bloğun sonunda Enter tuşuna hızla iki kez basarak dışarı çıkabilirsiniz. Varsayılan çift basma aralığı 180ms’dir.

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

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

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

Mobil uyumlu

Mobil arayüz — Düzenleme araçlarını ekran genişliğine göre yerleştirir.
Mobil klavye uyarlaması — Klavye açıldığında düzenleme alanının yüksekliğini ayarlar.
Esnek boyutlandırma — Yakınlaştırma ve uzaklaştırmaya uyum sağlamak için ana düzende rem birimlerini kullanır.
Birden fazla dil — Dil ve metin yönüne uygun yerel ayar ve yazı tipi ailesi seçilebilir.

Özelleştirme

Kendi kanadınız — ihtiyaç duyduğunuz bir özelliği kendiniz geliştirip bağlayabilirsiniz.
Kendi CSS’niz — ana renkleri, köşeleri ve boşlukları --nabi-* belirteçleriyle açık ve koyu modlara uyarlayabilirsiniz.
Açık kaynak — kaynak kod GitHub’da paylaşılır ve birlikte geliştirilir.

Belgeleri okuyun → nabi.saro.me

HTMLDüzenleyici yükleniyor…

JSONnabi-treeDüzenleyici yükleniyor…

Yükle

npm install nabi-note

Kod

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('tr')
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')