İçeriğe geç

editor

CKEditor Kullanımı – Toolbar Düzenlemesi

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

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]

 

 

Exit mobile version