Tablolar

@viveeditor/ext-table editöre tablo ekler: hücreleri birleştirme, başlık satırları, sürükleyerek sütun genişliği ayarlama ve hücreler arasında Tab ile gezinme. Kaydedilen HTML sütun genişliklerini taşır, böylece tablo her sitede aynı görünür. Bu sayfa eklentiyi kurmayı, tablo araçlarını ve klavye kullanımını anlatır.

Kurulum

import { Editor } from '@viveeditor/core'
import { Table } from '@viveeditor/ext-table'
import '@viveeditor/ext-table/style.css'

const editor = await Editor.create(document.querySelector('#editor'), {
  extensions: [Table],
})

editor.commands.insertTable({ rows: 3, cols: 3, headerRow: true })

Tek betikli kurulumda tablo eklentisi zaten yüklüdür.

Seçenek	Varsayılan	Açıklama
resizable	true	Sütun kenarını sürükleyerek genişlik ayarlamayı açar.
cellMinWidth	48	Bir sütunun piksel olarak en küçük genişliği.
maxSize	20	insertTable ile eklenebilecek en fazla satır ve sütun sayısı.

Tablo eklemek

• Araç çubuğundaki tablo düğmesi 6×6’lık bir ızgara açar. Fareyle ya da ok tuşlarıyla boyutu seçip tıklayın veya Enter tuşuna basın. Tablo başlık satırıyla eklenir.
• / menüsünde “Tablo” girişi başlık satırlı 3×3 bir tablo ekler (/tablo).
• Kodla eklemek için insertTable({ rows, cols, headerRow }) kullanın. Değer verilmezse tablo 3×3 olur ve başlık satırıyla başlar.

Boş bir paragrafta eklenen tablo o paragrafın yerini alır. Tablonun içine ikinci bir tablo eklenemez.

Tablo araçları

İmleç bir tablonun içindeyken araç çubuğundaki tablo düğmesi ızgara yerine tablo araçlarını açar:

Grup	Araçlar
Ekle	Üste satır ekle, Alta satır ekle, Sola sütun ekle, Sağa sütun ekle
Düzen	Hücreleri birleştir, Hücreyi böl, Başlık satırı, Sütunu genişlet, Sütunu daralt
Sil	Satırı sil, Sütunu sil, Tabloyu sil

O an uygulanamayan araçlar devre dışı görünür. Örneğin tek bir hücre seçiliyken “Hücreleri birleştir” kullanılamaz. Panel Esc ile kapanır.

Birleştirilmiş hücreler

Fareyle sürükleyerek birden fazla hücre seçin ve “Hücreleri birleştir” seçeneğine basın. Birleşik bir hücreyi eski haline getirmek için içine tıklayıp “Hücreyi böl” seçeneğini kullanın. Birleştirilmiş hücreler Word dosyasına kaydedilirken de korunur.

Başlık satırı ve sütunu

“Başlık satırı” ilk satırı başlık hücrelerine çevirir ya da geri alır. Başlık hücreleri HTML’de th olarak yazılır, ekran okuyucular bu sayede sütun başlıklarını duyurur. İlk sütunu başlık yapmak için arayüzde düğme yoktur; editor.commands.toggleHeaderColumn() komutunu kullanın.

Sütun genişlikleri

resizable açıkken bir sütunun sağ kenarını sürükleyerek genişliğini değiştirin. Klavyeyle çalışıyorsanız tablo araçlarındaki “Sütunu genişlet” ve “Sütunu daralt” imlecin bulunduğu sütunu 40 piksel değiştirir. Sütun cellMinWidth değerinden daha dar olamaz.

Genişlik verilmiş tablolar kaydedilen HTML’de bir colgroup ve sütun başına width stili taşır. Tablonun kendisine de toplam genişlik yazılır; bazı sütunların genişliği yoksa bu değer en küçük genişlik olarak kullanılır. Hiç genişlik verilmemiş tablolar stil taşımaz.

Klavye

• Tab sonraki hücreye geçer. Son hücrede yeni bir satır ekler.
• Shift+Tab önceki hücreye döner.
• Esc ve ardından Tab odağı tablodan ve editörden çıkarır.

Komutlar

Komut	Ne yapar
insertTable(options)	Tablo ekler.
addRowBefore(), addRowAfter()	Satır ekler.
addColumnBefore(), addColumnAfter()	Sütun ekler.
deleteRow(), deleteColumn(), deleteTable()	Satırı, sütunu ya da tabloyu siler.
mergeCells(), splitCell()	Hücreleri birleştirir ya da böler.
toggleHeaderRow(), toggleHeaderColumn()	Başlık satırını ya da sütununu açıp kapatır.
resizeColumn(delta)	İmlecin bulunduğu sütunu piksel olarak genişletir ya da daraltır.

editor.query.inTable() imleç bir tablonun içindeyse true döner. Komutları önce denemek için editor.can.mergeCells() gibi can biçimini kullanın.

Tablolar Markdown ve Word dosyalarına da kaydedilir; ayrıntılar Dosya aç, kaydet, yazdır sayfasında.

Sütun genişlikleri yayın sayfasında korunur mu?

Evet. Genişlikler kaydedilen HTML'e colgroup ve stil olarak yazılır, bu yüzden içerik hangi sitede gösterilirse gösterilsin aynı kalır. Sunucu temizleyicisi tablo genişliklerini korur.

Tablonun içine tablo eklenebilir mi?

Hayır. İmleç bir tablonun içindeyken tablo ekleme komutu çalışmaz; araç çubuğundaki tablo düğmesi o sırada tablo araçlarını açar.

Klavyeyle tablodan nasıl çıkarım?

Önce Esc, sonra Tab tuşuna basın. Tab tek başına hücreler arasında gezdiği için bu sıra odağı editörden sonraki öğeye taşır.