config Archives - Gençbilişim.net

CKEditor Kullanımı – Ayarlar

Samet ATABAŞ
Temmuz 6, 2014Nisan 7, 2015
Genel

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:

[code lang="html"]<!DOCTYPE html>
<html>
    <head>
        <title>CKEditor Örnek</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        
        <script src="ckeditor/ckeditor.js"></script>
    </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>[/code]

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.

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:

[code lang="javascript"]/**
* @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.
};

[/code]

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.

[ilink url="http://docs.ckeditor.com/#!/api/CKEDITOR.config"]CKEditor dökümantasyonu[/ilink] [box type="tick" style="rounded"]
Diğer yazılar:

CKEditor Kullanımı – Kurulum
CKEditor Kullanımı – Toolbar Düzenlemesi
CKEditor Kullanımı – Dosya Yöneticisi
CKEditor Kullanımı – Ajax Post
[/box]