Temel kullanım ​

Bu belge, tarayıcıda çalışan bir CSR düzenleyicisini temel alır. Kullanacağınız kanatları seçer, düzenleyiciyi ekrana bağlar, ardından NABI TREE JSON'u kaydedip yeniden yüklersiniz.

Kurulum ve temel HTML ​

npm install nabi-note

Düzenleyici ve yayın ekranı aynı CSS'yi yükler. Düzenleme alanına contenteditable özniteliğini doğrudan eklemeyin; bunu mountSurface() yönetir.

import 'nabi-note/nabi.css'

<div class="nabi">
  <div id="toolbar" class="nabi-toolbar"></div>
  <div id="content" class="nabi-content"></div>
</div>

Düzenleyiciyi bağlama ​

allBasic(), ayrı bir sunucu bağlantısı olmadan kullanılabilen resmi kanatları seçer. Yükleme, dosya kaydetme/açma ve değişiklik karşılaştırma gibi hizmet tarafı bağlantısı isteyen kanatları, ilgili kanat belgesindeki yönergelere göre ekleyin.

import {
  createNabiWith,
  mountSurface,
  mountToolbar,
  wings,
} from 'nabi-note'

const content = document.querySelector<HTMLElement>('#content')!
const toolbarRoot = document.querySelector<HTMLElement>('#toolbar')!

const { nabi, registry } = createNabiWith(wings().allBasic(), {
  locale: 'tr',
  onError: (error) => console.error(error),
  undoLimit: 200,
  typingMergeMs: 1000,
})

const surface = mountSurface({
  nabi,
  registry,
  root: content,
  locale: 'tr',
  placeholder: 'İçeriğinizi girin.',
})
const toolbar = mountToolbar({
  nabi,
  registry,
  root: toolbarRoot,
  surface: content,
  locale: 'tr',
})

locale, araç çubuğu ve yardım metinlerinin dilidir; tüm ekran parçalarına aynı değeri verin. placeholder, boş düzenleyicide görünen metindir; boş dize olursa gizlenir. onError, komut veya callback içinde yalıtılmış hataları alır. undoLimit, geri alma sayısıdır ve varsayılanı 200'dür. typingMergeMs, ardışık yazımı tek bir geri alma işleminde birleştiren süredir; 0 olursa her karakter ayrı olur.

Blok container'dan çıkmak için art arda Enter basışlarının varsayılan aralığı 180ms'dir. Çift Esc ve Shift için 350ms korunur. mountSurface() içinde doubleEnterMs açıkça verilirse yalnızca Enter değil, çift Esc aralığı da bu değere değişir.

Her düzenleyici için çakışmayan içerik ve araç çubuğu root'ları kullanın. Birden çok düzenleyicinin bulunduğu ekranda da kısayolların ve odağın karışmaması için araç çubuğunun surface alanına kendi düzenleme alanını iletmelisiniz.

Araç çubuğunu yapılandırma ​

Varsayılan araç çubuğu başlık, metin biçimi, hizalama, liste, ekleme ve belge araçlarını bu sırayla gruplar; grupların arasında dikey ayraçlar bulunur. Masaüstünde tüm araçlar birden fazla satırda, mobilde hızlı araçlar ve tüm araçlar düğmesi tek satırda gösterilir. Tablo, resim ve yüzen bölge özellik araçları altta görünür; metin araçlarıyla birlikte kullanılabilir.

groups grup sırasını, quick mobil hızlı araç sırasını değiştirir. Örneğin sık resim eklenen bir editörde media grubu başa alınabilir.

import { TOOLBAR_GROUPS, mountToolbar } from 'nabi-note'

const toolbar = mountToolbar({
  nabi,
  registry,
  root: toolbarRoot,
  surface: content,
  locale: 'tr',
  groups: ['media', ...TOOLBAR_GROUPS.filter((group) => group !== 'media')],
  quick: ['b', 'i', 'tc', 'img'],
})

Hızlı araçlar belirtilen sırayı ayraçsız kullanır. Grup içinde kanatların kayıt sırası izlenir. Araç çubuğunu SSR ile önceden oluşturuyorsanız sunucu ve tarayıcıya aynı grup sırasını verin. Ekran genişliğine göre yerleşim CSS temalarında açıklanır.

mountHints() bağlandığında Shift'e iki kez basarak klavyeyle araç seçebilirsiniz. Tab grup değiştirir; ok tuşları aynı grubun simgeleri arasında ilerler. Masaüstü ve tam ekran görünür araç çubuğunu, mobil ise tüm araçlar paletini kullanır.

Resim panelleri, URL girişleri ve dosya seçiciler açıldıkları andaki seçimi hatırlar. Yalnızca imleci taşıdıysanız özgün konuma eklerler; belgeyi düzenlediyseniz veya değiştirdiyseniz girdiyi iptal edip bildirim gösterirler. Geri alma aynı içeriği getirse bile eski seçim yeniden kullanılmaz.

Kanatları seçme ​

Yalnızca gereken özellikleri eklemek için use() ve drop() kullanın. Her kanadın kabul ettiği seçenekleri ilgili kanat tanıtım belgesinden öğrenebilirsiniz.

const selected = wings()
  .allBasic()
  .drop('youtube')
  .use('upload')

const { nabi, registry } = createNabiWith(selected, { locale: 'tr' })

Küçük bir bundle gerektiğinde boldWing, imageWing gibi yalnızca gereken kanatları dizi olarak da iletebilirsiniz. Olmayan adlar, geçersiz seçenekler ve kopuk bağımlılıklar düzenleyici oluşturulurken hemen hata verir.

Kaydetme ve yükleme ​

Yeniden düzenlenecek belgeler için getJson() ile alınan NABI TREE JSON'u saklayın. getHtml() yayın için çıktıdır. Düzenleme ekranına özel getEditorHtml() saklanmaz.

const json = nabi.getJson()
await saveToServer(json)

const saved = await loadFromServer()
if (!nabi.setJson(saved)) {
  showError('Kaydedilen belge okunamadı.')
}

const publishedHtml = nabi.getHtml()

Harici HTML içe aktarırken setHtml() kullanın. Tarayıcı düzenleyicisi HTML parser'ını otomatik bağladığı için ayrı bir parser seçeneği gerekmez. setJson() ve setHtml(), geçersiz ve boş olmayan girdilerde false döndürür ve mevcut belgeyi korur.

nabi.setHtml('<p>İçe aktarılan belge</p>')

JSON ve HTML'nin ikisi de güvenilmeyen girdidir. Kaydedilen kanatlar ve izin kuralları üzerinden okunurlar; ancak yükleme yetkisi denetimini veya hizmetin güvenlik politikasını onların yerine getirmezler.

Sık kullanılan API'ler ​

Kesin türleri ve tüm bağımsız değişkenleri önce kurulu paketin tür bildirimlerinde denetleyin. Otomasyon araçları için İngilizce API reference da sunulmaktadır.

Ekranı kapatırken ​

Mount edilen parçaları oluşturulma sırasının tersine kaldırın. Düzenleme alanının innerHTML değerini doğrudan değiştirmeyin; belgeyi değiştirirken setJson(), setHtml(), applyCommand() gibi açık API'leri kullanın.

function dispose() {
  toolbar.unmount()
  surface.unmount()
}