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:
[code lang="html"]<!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>[/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]