editor Archives - Gençbilişim.net

CKEditor Kullanımı – Toolbar Düzenlemesi

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

CKEditor ün bir çok özelliği var bu özellikler güzel olsa da çok fazla olması kullanıcıyı rahatsız edebilir. Kullanıcı için sade ve kullanışlı olması ön plandadır.Eğer kullanıcının kullanacağı araçlar sadece kalın,altı çizgili,sağ sola yasla,ve renk ise karşısına daha fazlasını çıkartmanın bir anlamı yok.Bunun için yapmamız gereken aşağıdaki gibi bir ayarlama:

[code lang="javascript"]<script type="text/javascript">
CKEDITOR.replace('editor1',{
toolbar:[[ 'Bold', 'Italic', 'Underline', 'Strike','-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' , '-', 'TextColor' ]]
});
</script>[/code]

bu işlemi ayar(config.js) dosyasında yapmak için :

[code lang="javascript"]CKEDITOR.editorConfig = function (config) {
config.toolbar:[
[ 'Bold', 'Italic', 'Underline', 'Strike','-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' , '-', 'TextColor' ]
]
});[/code]

Bu ayarla çalıştırdığımız CKEditor şu şekilde olacaktır:

Kullanılabilir tüm araçlar:

[box type="note" style="rounded"][ ‘Source’, ‘-‘, ‘Preview’, ‘-‘, ‘Templates’ ] ,
[ ‘Cut’, ‘Copy’, ‘Paste’, ‘PasteText’, ‘PasteFromWord’, ‘-‘, ‘Undo’, ‘Redo’ ] ,
[ ‘Find’, ‘Replace’, ‘-‘, ‘SelectAll’] ,
[ ‘Form’, ‘Checkbox’, ‘Radio’, ‘TextField’, ‘Textarea’, ‘Select’, ‘Button’, ‘ImageButton’, ‘HiddenField’ ] ,
‘/’,//Satır sonu
[ ‘Bold’, ‘Italic’, ‘Underline’, ‘Strike’, ‘Subscript’, ‘Superscript’, ‘-‘, ‘RemoveFormat’ ] ,
[ ‘NumberedList’, ‘BulletedList’, ‘-‘, ‘Outdent’, ‘Indent’, ‘-‘, ‘Blockquote’, ‘CreateDiv’, ‘-‘, ‘JustifyLeft’, ‘JustifyCenter’, ‘JustifyRight’, ‘JustifyBlock’ ] ,
[ ‘Link’, ‘Unlink’ ] ,
[ ‘Image’, ‘Flash’, ‘Table’, ‘HorizontalRule’, ‘Smiley’, ‘PageBreak’] ,
[ ‘Styles’, ‘Format’, ‘Font’, ‘FontSize’ ] ,
[ ‘TextColor’, ‘BGColor’ ],
[ ‘Maximize’, ‘ShowBlocks’ ] ,[/box]

[box type="tick" style="rounded"]
Diğer yazılar:

CKEditor Kullanımı – Kurulum
CKEditor Kullanımı – Ayarlar
CKEditor Kullanımı – Dosya Yöneticisi
CKEditor Kullanımı – Ajax Post
[/box]

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:

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]