Projelerimizde gelişmiş elemanlar barındıran bir yazı (blog yazısı gibi) oluşturmak için sayfalar hazırlarız , bu sayfamızda yazının girileceği eleman sadece textarea olursa düz metinden ileri gidemeyiz.Daha gelişmiş yazılar yazmak için gelişmiş metin editörleri kullanırız.
Ckeditor en çok kullanılan metin editorlerinden biri resim ,video,flash animasyon,tablo,liste,form gibi birçok elemanı kullanmanıza olanak sağlıyor
CKEditor Kurulumu
Kurulum kelimesi ckeditor için biraz fazla geliyor aslında oldukça basit bir işlem. Download Ckeditor Sayfasından ckeditor ü indirdikten sonra zip dosyasının içeriğini sitenizin ana dizinine çıkartın.Artık http://<siteniz>/ckeditor/samples/index.html adresinde ckeditor ün çalışan bir örneğini görebilirsiniz(Localhost üzerinde çalışıyorsanız bu adres:http://localhost/ckeditor/samples/index.html şeklinde olacaktır.).
Şimdi örnek bir sayfa ile nasıl kullanıldığına bakalım
<!DOCTYPE html> <html> <head> <title>CKEditor Örnek</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <form> <textarea name="editor1" id="editor1" rows="10" cols="80"> Gelişmiş elemanları bulunan metin alanı </textarea> </form> </body> </html>
Bu şekilde kodladığımız bir sayfanın aşağıdaki resimdeki gibi oluşuyor.
Bu sayfaya ckeditor ü eklemek için kodları şu şekilde düzenliyoruz:
<!DOCTYPE html> <html> <head> <title>CKEditor Örnek</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!--Ckedtor ana dosyasını ekleyelim--> <script src="ckeditor/ckeditor.js"></script><!--ckeditor dosyaları bu dosya ile aynı dizinde--> </head> <body> <form> <textarea name="editor1" id="editor1" rows="10" cols="80"> Gelişmiş elemanları bulunmayan metin alanı </textarea> </form> <script> // Ckeditor ü ön tanımlı ayarları kullanarak <textarea id="editor1"> nesnesi üzerinde aktif ediyoruz CKEDITOR.replace( 'editor1' ); </script> </body> </html>
Sonuç:
Ckeditor i aktif yapmak bu kadar basit . Eğer herhangi bir ayar yapmadan direk ön tanımlı ayarlarla ckeditor kullanacaksanız <textarea> nesnesinin class özelliğine “ckeditor” atamasını yaparak Ckeditor ü aktif hale getirebilirsiniz.Böylece fazladan java sctirpt kodu yazmazsınız.
... <body> <form> <textarea name="editor1" id="editor1" rows="10" cols="80" class="ckeditor"> Gelişmiş elemanları bulunmayan metin alanı </textarea> </form> </body> </html>
Sonraki yazılarımda ckeditor bazı ayarlarından, ckeditor e dosya yöneticisi bağlanmak ve ajax ile ckeditor kullanmaktan bahsedeceğim.Umarım kısa zamanda vakit ayırıp yazabilirim.
CKEditor Kullanımı – Ayarlar
CKEditor Kullanımı – Toolbar Düzenlemesi
CKEditor Kullanımı – Dosya Yöneticisi
CKEditor Kullanımı – Ajax Post
Gerçekten çok faydalı bir bilgi olmuş ne zamandır bu konu üzerinde araştırma yapıyordum. Sayenizde bu sorunumu çözebildim çok teşekkürler.
Çok Teşekkür Ederim Bu Tarz Web Sitelerinin Olması Beni Çok Mutlu Ediyor Bilgi Deposu Web Siteniz Emeği Geçen Herkesten Allah Razı Olsun İyi Çalışmalar 🙂