CKEditor Kullanımı – Ayarlar

Merhabalar uzun aradan sonra kpss maratonunu atlatım bilgisayarıma kavuştum ve önceden yazmayı planladığım bu yazımı yazmaya vakit ayırabildim. CKEditor ü sayfamıza nasıl  ekleyeceğimizi önceki  yazımda göstermiştim.

Bu yazıda da CKEditor ün bazı  özelliklerinin  nasıl belirleneceğini, değiştirileceğini anlatacağım.CKEditor ayarlarını iki basit yöntemle yapabiliriz: Birincisi CKEditor ü eklediğimiz sayfa üzerinde tanımlamalar yaparak , ikincisi CKEditor config dosyasında tanımlamalar yaparak.

Sayfa üzerinde tanımlamalar yaparak:

<!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 method="post" action="">
            <textarea name="editor1" id="editor1" rows="10" cols="80">
                Gelişmiş elemanları bulunan metin alanı
            </textarea>
            <input type="submit" value="Kaydet">
        </form>
        <script>
            CKEDITOR.replace( 'editor1',{
          language: 'tr', //CKEDITOR arayüz dili
          uiColor: '#9AB8F3',// CKEDITOR arayüz rengi
          colorButton_colors : '000000,FF0000,00FF00,0000FF',//yazı renk butonunun renkleri
          colorButton_enableMore : false, //belirtilenler dışında renk  seçimini  engelleme
          contentsLanguage : 'tr'//Editör içeriği oluşturmak için kullanılan yazı dilinin dil kodu.
        });
        </script>
    </body>
</html>

CKEditor replace fonksiyonunun ikinci  parametresine uygulanmasını  istediğimiz  özellikleri tanımlayabiliyoruz.Temel bir kaç  ayarı üstte gösterdim tüm ayarları CKEditor dökümantasyonunda bulabilirsiniz.

ckeditor3

CKEditor config dosyası ile ayarları belirlemek:

Ayar dosyası ckeditor klasörünün içindeki config.js dosyasıdır.Bu dosya ile ayarlama yapmak için dosyada hazır bulunan editorconfig fonksiyonunu kullanacağız. Üste yaptığımız ayarların aynısını bu dosya üzerinden şu şekilde yapabiliriz:

/**
* @license Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.html or http://ckeditor.com/license
*/

CKEDITOR.editorConfig = function( config ) {
config.language = 'tr'; //CKEDITOR arayüz dili
config.uiColor = '#9AB8F3';// CKEDITOR arayüz rengi
config.colorButton_colors = '000000,FF0000,00FF00,0000FF';//yazı renk butonunun renkleri
config.colorButton_enableMore = false; //belirtilenler dışında renk  seçimini  engelleme
config.contentsLanguage = 'tr';//Editör içeriği oluşturmak için kullanılan yazı dilinin dil kodu.
};

Bu şekilde yapılan ayarlama ile kullandığınız tüm editorler bu ayarlara sahip olacak.Sayfa içinde yaptığımız ayarlar ise sadece o editor için geçerli olur.

Sonraki  yazıda CKEditor de bulunan butonların düzenlenmesinden bahsedeceğim.Sonraki  yazıda görüşmek üzere.

CKEditor dökümantasyonu

 

 

Samet ATABAŞ

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

Bir Yorum Yazın

This site uses Akismet to reduce spam. Learn how your comment data is processed.