"Enter"a basıp içeriğe geçin

CKEditör Nedir? CKEditör Projeye Nasıl Eklenir?

Web sitesi hazırlarken; yazı ekleme işlemi olsun, kullanıcıların yazıya yorum yapması olsun, bir editöre ihtiyaç duyulur. Örneğin textarea’yı ekleyebiliriz, ama bu element ile yapılabilecekler sınırlıdır. Bloga girilecek bir yazıyı düşünürsek, yazı içerisinde h2, yazıyı iki yana yaslama gibi farklı stiller eklenmesi gerekir. Bu işlemleri gerçekleştirebilmek için html editör eklentisi kullanılır.
Html editör eklentisi olarak farklı farklı birçok eklenti mevcuttur. Lakin bunlardan en bilineni, en çok kullanılanı CKEditor’dür. CKEditör eklentisini proje ekledikten sonra artık girdileri istediğiniz biçimde uyarlayabilirsiniz.

Aşağıda CKEditor nereden indirilir, projeye nasıl eklenir, CKEditor’e girilen veri nasıl alınır bundan bahsediyor olacağım.

Öncelikle CKEditor’ün hangi sürümünü kullanacaksak onu belirliyoruz, ardından aşağıdaki linke tıklıyoruz.
https://ckeditor.com/ckeditor-4/download/
https://ckeditor.com/ckeditor-5/download/

Açılan indirme sayfasından, CKEditor’ün ister standart halini, isterseniz de düğmeleri kendinize göre düzenleyip indirebilirsiniz. İndirdikten sonra eklentinin dosyasını projenize ekleyin. Daha sonra eklentinin hangi sayfada çalışmasını istiyorsanız, sayfaya aşağıdaki kodu ekleyin.

Not: CKEditor eklentisinin içeriğini siz düzenleyecekseniz, editöre ekleyip çıkaracağınız eklentilere dikkat etmelisiniz. Aksi taktirde editör çalışmaz. Buna örnek vermek gerekirse; editör içerisinde, resim yükleme eklentisini kaldırdınız diyelim ama resim düzenleme eklentisini kaldırmadıysanız, hatayla karşılaşabilirsiniz.

<script src="~/Contents/ckeditor4/ckeditor.js"></script>
<script>
CKEDITOR.replace('editor');
</script>

Yukarıdaki kodu ekledikten sonra, artık sayfada istediğiniz kısma ckeditor’ü çağırabilirsiniz.
Bunun için aşağıdaki kodu yazmanız yeterlidir.

<div id="editor">
İçerik Giriniz
</div>

Burada id’yi değiştirirseniz, replace kısmından da aynı şekilde değiştirmelisiniz.

Evet buraya kadar herşey tamam. Peki girilen veriyi bir değişkene nasıl atayabiliriz? Bunu yapabilmek için de aşağıdaki kodu kullanmalıyız.

var icerik = CKEDITOR.instances.editor.getData();

Html editörü CKEditor ile anlatacaklarım bu kadar arkadaşlar. Daha fazla bilgi almak için aşağıdaki linklere göz atabilirsiniz.
https://ckeditor.com/docs/ckeditor5/latest/
https://ckeditor.com/docs/ckeditor4/latest/

Yazıyı Paylaşmak İster misin?
Share on Facebook
Facebook
Pin on Pinterest
Pinterest
Tweet about this on Twitter
Twitter
Share on LinkedIn
Linkedin
Share on Tumblr
Tumblr
Share on Reddit
Reddit
    Bir cevap yazın

    E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir