Siteniz için Basit Zengin Metin Editörü
Siteniz için Basit Zengin Metin Editörü

Siteniz için Basit Zengin Metin Editörü

JQuery ClassyEdit, standart textarea öğesini zengin metin editörü düzenleyicisine dönüştüren basit bir jQuery eklentisidir.

Web sitelerinizin formlarındaki textarea alanlarını zengin metin editörüne dönüştüren güzel ve basit bir kod derlemesi. Zengin metin editörü php veya istediğiniz bir dildeki formda kullanabilirsiniz.

Form diğer metin editörlerine göre basit ve bir sürü dosyayı kapsamıyor. Tek bir jquery dosyası ile bir css dosyası ve editöre ait resim dosyalarının bulunduğu bir klasörden oluşuyor.

Editörün genel olarak özellikleri:

  • Metin alanına tıklandığında animasyonlu bir araç çubuğu görüntülenir.
  • Kalın, İtalik, Altçizgi, Listeler, Bağlantılar ve HTML Kaynağını görüntülemeyi destekler.
  • Bir sayfada birden fazla örnek çalıştırabilirsiniz. Yani tek sayfada birden fazla textarea öğesini zengin metin editörüne dönüştürebilirsiniz. 
  • Açma / kapatma düğmesi. Boşluğa tıklandığında otomatik gizlenir.
  • Hafif ve kullanımı kolay.
  • Çoklu tarayıcı desteği: IE7 +, Chrome, Firefox, Safari, vb.

Örnek çalışan zengin metin editörü örneğine buradan bakabilirsiniz.

İndireceğiniz dosya içerisindeki index.html dosyası örnek alınabilir. Herhangi bir kod editöründe açıp dosya içeriğini inceleyebilirsiniz. Bende size kendi sayfanıza uyarlama için nasıl bir izleyeceğinizi basit bir şekilde göstereceğim.

1. Önce eğer sayfanızda yoksa jQuery kütüphanesini ekleyin. Aşağıdaki kodu ekleyebilirsiniz.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

2. jQuery kütüphanesi eklemesinden sonra jQuery ClassyEdit eklentilerini sayfanıza ekleyin. Aşağıda örnek kod var.

<script src="js/jquery.classyedit.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.classyedit.css" />

3. Html veya php kodlarınız içindeki textarea kutusunun kodlarını bulun. Aşağıdaki gibi class öğesini textarea kodlarına ekleyin.

<textarea class="classy-editor"></textarea>

4. Textarea kodlarından sonra aşağıdaki kodu kopyalayıp-yapıştırın.

<script>
$(document).ready(function() { $(".classy-editor").ClassyEdit();
});
</script>

Böylece Php ve Html ile hazırladığınız formlarınızdaki düz textarea kutularına zengin metin editörü özelliği kazandırabilirsiniz. Dosyanın toplam boyutu 24 KB. Diğer komplike metin editörleri gibi büyük ve karmaşık değil.


Bu yazıyı 5 yıldız üzerinden kaçla değerlendirirsiniz?
Daha önce bu yazı 0 kez değerlendirilmiş ve ortalama 0 yıldız verilmiş.
Bu yazı daha önce 742 kez okundu.

Yorum Yaz

    Yorumlar

    Bu yazıya henuz bir yorum yapılmamış. İlk yorumu yapan siz olun!
İstanbul Firma, İlan, Gezi Rehberi ve Haberleri instagram takipçi satın al