Ckeditor Kullanımı – Kurulum
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
[code lang="html"]<!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>[/code]
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:
<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>[/code]
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.
[code lang="html"]...
<body>
<form>
<textarea name="editor1" id="editor1" rows="10" cols="80" class="ckeditor">
Gelişmiş elemanları bulunmayan metin alanı
</textarea>
</form>
</body>
</html>[/code]
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.
[box type="tick" style="rounded"]
Diğer yazılar:
CKEditor Kullanımı – Ayarlar
CKEditor Kullanımı – Toolbar Düzenlemesi
CKEditor Kullanımı – Dosya Yöneticisi
CKEditor Kullanımı – Ajax Post
[/box]