HTML5 Contenteditable Attribute Ön Uçta Web İçeriğini Düzenle

İçindeki yeni özelliklerden biri HTML5 Bu beni çeken yerli ön uç editörüdür. Bu özellik, içeriği doğrudan tarayıcıdan düzenlemek için genellikle İçerik Yönetim Sistemlerinde uygulanır ve genellikle tamamen JavaScript ve AJAX ile oluşturulur. HTML5 kullanarak işlemi biraz daha kolay hale getirmek için geliyor contenteditable nitelik.

Bu ne yapar

Herhangi bir elemana uygulandığında, bu özellik bize Düzenle içeriğinde, aşağıdaki örneği görelim:

 Kurabiye çörek kruvasan. Faworki Danimarkalı bisküvi. Jujubes toz kurabiye kek bisküvi helva helva. Bisküvi zamkları jöleli bisküvi.
 Tatlı rulo tiramisu çikolata bar şeker erik karamel tootsie rulo karamel. Çikolatalı kek wypas pamuk şeker krema. Uygulamalı susam meyankökü hamurlu kruvasan karamelli meyveli kek zencefilli bisküvi. Halka şekerleme şeker kamışı.

Bu örnekte ekledik contenteditable öznitelik ve ayarla doğru Böylece içerik düzenlenebilir hale gelir. Bu özellik için eklenebilecek iki değer daha var;

yanlış tam tersi: içerik düzenlenemez
miras almak; içeriği ne zaman düzenlenebilir hale getireceğini doğrudan ebeveyn de düzenlenebilir.

Demoyu Gör

Yukarıdaki demoya göz attıysanız, içeriğin doğrudan tarayıcılardan düzenlenebileceğini görebilirsiniz. Ancak, bu öğenin yaptığımız değişikliklerin saklanmasını kapsamadığı unutulmamalıdır, bu nedenle değişikliği yaptıktan sonra sayfayı yenilediğinizde içerik geri döndürülür.

Değişiklikler Nasıl Kaydedilir?

Değişiklikleri kaydetmek, verileri nerede depolayacağımıza bağlıdır; Genellikle, bir veritabanına kaydedilir. Ancak, veritabanı erişimine sahip olmadığımızdan, bu eğitimde, değişikliklerin nasıl kaydedileceğini göstereceğiz. yerel depolama. Bunu yapmak için, kodu daha basit hale getirmek için biraz jQuery kullanacağız. Web Uygulamaları için Yerel Depolamanın Geçmişi, Bugünü ve Geleceği'ne bir referans olarak bakmanızı tavsiye ederim..

Her şeyden önce, bir ekleyelim buton içeriğimizin yanında.

  Tatlı rulo tiramisu çikolata bar şeker erik karamel tootsie rulo karamel. Çikolatalı kek wypas pamuk şeker krema. Uygulamalı susam meyankökü hamurlu kruvasan karamelli meyveli kek zencefilli bisküvi. Halka şekerleme şeker kamışı.

Buradaki fikir, düğmeye tıklandığında değişiklikleri saklayacağımızdır. Öyleyse bu olayı senaryo ile ayarlayalım;

 varContent = $ ('# content2'); $ ('# save'). on ('click', function () var editedContent = theContent.html (); localStorage.newContent = editedContent;);

Bu kod, içeriğinde yapılan son değişikliği içeren localStorage uygulamasında yeni bir anahtar oluşturur. Firebug veya Geliştirici Araçlarını, verilerin başarıyla depolanıp depolanmadığını netleştirmek için kullanabiliriz, ancak düğmeye bastığınızdan emin olun. Firefox kullanıcıları için, DOM panel ve localStorage için arama yapın. Chrome kadar Safari’de 'Kaynaklar' sekmesi altında görüyoruz.

Daha sonra içeriği aşağıdaki şekilde güncellemek için bu verileri alabiliriz;

 if (localStorage.getItem ('newContent'))) theContent.html (localStorage.getItem ('newContent'));

Yukarıdaki kod öğeyi tanımlayacaktır yeni içerik localStorage öğesinden ve varsa, bu durumda değeri seçilen öğeye geçirir, bu durumda # content2. Bu noktada, sayfayı yenilediğimizde, yaptığımız değişikliği hala görmeliyiz..

Demoyu Gör
Kaynak İndir

Son düşünce

Eski günlerde, gösterdiğimiz gibi ön uç düzenleyici özelliğini eklemek saatler, hatta haftalar sürebilir. Bugün, bu özellik ile sadece bir saniye sürüyor, contenteditable.

Ayrıca, caniuse.com'a göre, bu özellik zaten IE7 + 'da (şaşırtıcı bir şekilde) ve (şaşırtıcı bir şekilde) aşağıdaki gibi diğer tarayıcılarda desteklenmektedir: Firefox 12, Chrome 20, Safari 5.1 ve Opera 12. eski tarayıcılar için fallbacsk kurulumu yapmak zorunda kalmadan.