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.

Samet ATABAŞ

Sakarya Üniversitesi Bilgisayar ve Öğretim Teknolojileri Öğretmenliği Mezunu.PHP Developer

Ckeditor Kullanımı – Kurulum” için bir yorum

  • 13 Mayıs 2017 tarihinde, saat 23:59
    Permalink

    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.

    Yanıtla

Bir Yorum Yazın