İçeriğe geç

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ıyorckeditor

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.

ckeditor1Bu  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ç:

ckeditor2

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ı – Kurulum” hakkında 2 yorum

  1. Ç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 🙂

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Bu site, istenmeyenleri azaltmak için Akismet kullanıyor. Yorum verilerinizin nasıl işlendiği hakkında daha fazla bilgi edinin.