CKEditör Kurulumu ve Kullanımı

Merhaba arkadaşlar bu makalede projelerimizde sıkça ihtiyaç duyduğumuz ünlü bir eklentinin kurulumu ve kullanımı hakkında bilgi vereceğim. Daha çok blog tarzı sitelerde makale, yorum, soru vb gibi html olarak alınması gereken bilgiler için Html editörler kullanmamız gerekir bu editörler ile site üzerinden düzenlenmiş içeriklerş oluşturulabilir. Kullanılan en kapsamlı ve işe yarar editör benim için şüphesiz CKEditör’dür çünkü bu eklenti ile matematik formüllerinden code snippet’lara kadar bir çok gerekli işlemleri yapabiliyorsunuz üstelik kullanımı da çok kolay ve tasarım olarak da göz dolduruyor ayrıca sitenizin genel tasarımına göre farklı temalar kullanabiliyorsunuz. Örnek görüntü aşağıdadır. 

ckeditör kurulumu ve kullanımı

Bu kadar övdükten sonra teknik detaylara giriş yapalım.

http://ckeditor.com/ adresinden resmi sayfasına ulaşabilir teknik dökümanlarını inceleyebilirsiniz, üst menüden “Download” linkine tıkladığınızda hazır halde 3 farklı versiyonu karşınıza gelecektir. Basic, Standard ve Full Package olarak basitten profesyonele giden bu paketlerden kendinize uygun olanı seçebilirsiniz örneğin, sadece yorum yazmak için kullanacaksanız Basic sürümü işinizi görecektir ama makale yazmak ya da sitenize siteniz üzerinden bir sayfa eklemek vs işlemleri için kulllanacaksanız Full Package kullanabilirsiniz. Bunların yanısıra ekstra özelliklere ihtiyacınız varsa örn; matematik formülleri ya da renklendirilmiş kodlamalar. “Or Let Me Customize CKeditör” seçeneği ile kendinize özel paket hazırlayabilirsiniz. uygun paket seçtiğinizde ya da hazırladığınızda “Download CKeditör” butonuna tıklayıp ektenti dosyalarını .zip olarak indirin. indirdiğiniz zip içerisinde “ckeditor.js” dosyasını ve güncel JQuery kütüphanesini projenize ekleyin. sayfanızda kullanmak için ise bir textarea ekleyin

<html>
  <head>
    <script src="/ckeditor/ckedior.js"/>
  </head>
  <body>
    <textarea id="editor1"></textarea>
  </body>
</html>

Bu textarea elementini Ckeditöre çevirmek için ise;

<script>
$(document).ready(function () {
           CKEDITOR.replace("editor1");
}
</script>

komutunu kullnabilirsiniz. Ckeditör üzerinde çeşitli konfigürasyonlar yapmak için ise aynı klasör içinde bulunan config.js dosyasını kullanabilirsiniz. komutlarını bilmeyenler için ckeditor samples/toolbarconfigurator/index.html sayfasını açıp Toolbar Configurator linkine tıklayın açılan sayfa ile paketiniz içinde bulunan istediğiniz butonu ekleyip çıkartabilirsiniz yeni satırlar ekleyebilirsiniz düzenlemeyi bitirdiğinizde otomatik oluşturulan kodu almak ve config.js içine yapıştırmak için Get Toolbar Config butonuna tıklayın.

1- CKeditör ile oluşturulan html içeriği okumak için;

var editor = CKEDITOR.instances.editor1;
alert(editor.getData());

2- İçeriği belirlemek için;

var editor = CKEDITOR.instances.editor1;
editor.setData(value);

3- Editör üzerinde bir olayı yakalamak için aşağıdaki kodu kullanabilirsiniz

$(document).ready(function () {
  CKEDITOR.instances.editor1.on("focus", function () {
    alert("focus meydana geldi");
  });
}

Editör üzerinde html kontrolllerinde kullanılan placeholder(yertutucu) işlemini yapmak için http://ckeditor.com/addon/confighelper adresindeki eklentiyi indirip içerisindeki confighelper klasörünü plugins klasörünün altına kopyalayın ardından eklentiyi ckeditöre tanıtmak için config.js içerisindeki ayarlara aşağıdakini de ekleyin

config.extraPlugins = 'confighelper';

ckeditör için kullandığınız textarea elementine verdiğiniz placeholder özelliği artık ckeditörde de çalışacaktır. daha fazla örnek ve teknik döküman  için http://sdk.ckeditor.com/ adresini ziyaret edebilirsiniz. umarım faydalı olmuştur.

 

Mustafa Tayyip YETİŞ
Yazılım Geliştirme Uzmanı

0.0 Ort. (0% puan) - 0 oy

Bir Cevap Yazın

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