Siteniz için Basit Zengin Metin Editörü

Siteniz için Basit Zengin Metin Editörü

/ / Okuma süresi: 2 dk, 28 sn / Yorum (0)
A A A

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ı emoji ile değerlendir!
like 0
like 0
like 0
like 0
like 0
like 0
Bu yazıyı sosyal medyada paylaş!
Bu yazı daha önce 1734 kez okundu.
Yazıya ait etiketler
Ogznet.com

Bu yazıyı beğendiniz mi? Haber bültenimize katılarak buna benzer yeni yazılardan haberdar olun!

Açılacak sayfada "Ben robot değilim" işaretleyip "Complete Subscription Request" yazan butona tıklayınız!

    Yorumlar

    Bu yazıya henuz bir yorum yapılmamış. İlk yorumu yapan siz olun!

Yorum Yaz

" Siteniz için Basit Zengin Metin Editörü konulu makalemizde Ogznet.com olarak sizlere Siteniz için Basit Zengin Metin Editörü ile ilgili bilgiler aktarmak istedik. Hemen yukarıda Siteniz için Basit Zengin Metin Editörü ile ilgili yorum ve görüşleri inceleyerek sizlerde yorum bırakabilirsiniz. "

Bir reklam engelleyici kullandığınızı fark ettik

Sorun yok. Kim kullanmıyor ki? Ancak reklam geliri olmadan bu siteyi geliştirmeye devam edemeyiz.

Reklam engelleyicimi devre dışı bıraktım. Devam etmeme izin ver! Reklam engelleyici ile devam etmek istiyorum! Reklam engelleyicimi nasıl devre dışı bırakabilirim?
logo

Bu site için için reklam engelleyici nasıl devre dışı bırakabilirim:

AdblockAdblock / Adblock Plus
  • Tarayıcınızın sağ üst kısmındaki AdBlock / AdBlock Plus simgesine tıklayın.
  • "Aşağıdaki adreste reklamları engelle" seçeneğini kapalı konuma getirin.
  • Değişiklikleri etkinleştirmek için "Tazele" butonuna tıklayın.
FirefoxFirefox Özel Tarama
  • Firefox'ta Özel Tarama yapıyorsanız, "İzleme Koruması" adblock bildirimini kullanabilir. Adres çubuğundaki "Kalkan" simgesini tıklayarak geçici olarak devre dışı bırakılabilir.
  • İşlem bittiğinde bu yardım kutusunu kapatın.
GhosteryGhostery
  • Tarayıcınızda Ghostery simgesini tıklayın.
  • Ghostery versiyon 6.0 altı ise "Whitelist site.", versiyon 6.0 ise "Trust site." ye tıklayın.
  • İşlem bittiğinde bu yardım kutusunu kapatın.
uBlockuBlock / uBlock Origin
  • Tarayıcınızda Ublock / Ublock Origin simgesini tıklayın.
  • Mevcut web sitesini beyaz listeye almak için görünen menüde "power" düğmesine tıklayın.
  • İşlem bittiğinde bu yardım kutusunu kapatın.