HTML 5 contentEditable Kullanımı

Bugün anlatmaya çalışacağım özellik, HTML 5’in yeni özelliklerinden biri contentEditable . Bu özellik ile kullanıcı tarafında zengin metin belgesi gibi içerikler yazıp, düzenleyebiliyorsunuz.

Genel olarak kullanılan bütün tarayıcılar bu özelliği desteklemekte. Firefox 3, Safari 3, Opera 9, Google Chrome ve Internet Explorer (5.5 den beri)

ContentEditable Nedir?

Aslında bu konu hakkında iki özellik ön plana çıktı designMode ve contentEditable. designMode bütün HTML’i düzenlenebilir bir alana dönüştürüyor. contentEditable ise HTML içinden sadece belli elementleri düzenlenebilir alana dönüştürüyor.

Bu iki özellikte Microsoft tarafından IE 5.5 ve sonrasında kullanılmak için oluşturuldu. Biz bu yazımızda işimize daha çok yarayacak olan ContentEditable ı göreceğiz.

ContentEditable Nasıl Çalışır?

Mark Finkle’ın yazdığı yazılardan alıntı yaparak bu bölümü anlatmak daha iyi olacak;

Mozilla adına Midas dediği bir zengin yazı düzenleyici sisteme sahip ve API’si IE’ye oldukça benziyor. Mozilla’nın bu özelliği IE gibi bütün dökümanın desingMode özelliği ile düzenlenebilmesine olanak tanıyor. Bir kere desing Mode’a geçildi mi, döküma DHTML komutlarla istenildiği gibi değiştirilebiliyor.

Firefox 3 contentEditable özelliğiyle desteklenerek WYSIWYG düzenleme kabiliyetini yükseltiyor. contentEditable özelliğine “True” diye izin vererek dökümanın bir parçasını düzenlebilir hale getirebiliyorsunuz.

Şimdi biz ContentEditable’a dönelim ve kullanımını görelim.

ContentEditable Kullanımı

<div contenteditable="true"></div>

Bu özelliğin doğru kullanımı bu şekildedir. Diğer kullanımlar farklı tarayıcılar açısından sorun yaratabilir. Bir element i bu şekle getirdiğimizde o elemente istediğimizi yazabiliriz ve Jquery vb. diller yardımıyla bunu başka bir yere kayıt edebiliriz.

Demin bir API oluşturulduğundan bahsetmiştik Şimdi API’nin Komutlarını görelim.

  • document.execCommand – Verilen komutu çalıştırır
  • document.queryCommandEnabled – Verilen komutun o anki durumunda belge üzerinde yürütülüp yürütülemeyeceğini kontrol eder
  • document.queryCommandIndeterm – Seçimin geçersiz olup olmadığını kontrol eder
  • document.queryCommandState – Verilen komutun geçerli seçimde çalıştırıp çalıştırılmadığını kontrol eder
  • document.queryCommandValue – Verilen komut için belgede, aralık veya geçerli seçimin geçerli olup olmadığını belirler.

Bir contenteditable alanınız varsa bu komutlar sayesinde alandaki düzenlemenizi Kalın, İtalik, Paragraf gibi özelleştirebilirsiniz. Böylece düzenleme alanınız daha zengin bir hal alacaktır.

http://www.quirksmode.org/dom/execCommand/ linkine tıklayarak execCommand’ların kullanımını test edebilirsiniz.

ContentEditable özelliğini bütün browser’lar destekler ama ExecCommand için durum aynı değildir. Hangi tarayıcının hangi özelliği desteklediğini görmek için aşağıdaki linkleri kullanabilirsiniz.

Göründüğü üzere basit özelliklerin hepsini bütün Browser’lar desteklemekte. Bu linkler yardımıyla sizde yapacağınız projede nelere dikkat etmeniz gerektiğini bilebilirsiniz.

Sonuç

Bu bilgiler sizin için bir girişteki bir sonraki yazımızda bu bilgileri de harmanlayarak basit bir yazı editörü oluşturacağız. O zamana kadar sağlıcakla Kalın.

DAHA FAZLA İÇERİK

Iphone 4 Macerası Iphone 4 Macerası

1 Aralık 2014, Pazartesi

SİZDE YORUM YAPIN