CKEditor Kullanımı – Ajax Post

Günümüzde  bir çok  form işleminde ajax kullanıyoruz.Ajax kullanmak sitemize  hem  hız hemde kalite katıyor. Bu yazıda CKEditor kullanırken nasıl  ajax post işlemi  yapacağımızdan bahsedeceğim.

CKEditor formda belirttiğimiz textarea nesnesini etkisiz bırakıp  yerine kendini aktif ediyor ve biz kaydet butonuna bastığımızda kendisindeki verileri textarea nesnesine aktarıyor ve form post ediliyor. Post işlemini ajax ile yaptığımızda ise CKEditor kendisinde barındırdığı verileri textarea nesnesine aktarmadan form bilgileri post ediliyor ve sonuç olarak boş bir post işlemi yapılmış oluyor.

Bu yüzden ajax post işlemi yapmadan önce CKEditor e bilgileri textarea nesnesine aktarmasını söylemeliyiz.CKEditor e  bu  durumu  söylemek  için instances sınıfının updadeElement() fonksiyonunu kullanacağız. Ajax post işlemini yapmadan önce aşağıdaki satırı çalıştırdığımızda CKEditor bilgileri  textarea nesnesine aktaracaktır.

[php]CKEDITOR.instances[‘editorName’].updateElement();[/php]

Buradaki editorName CKEditor ü  aktif  ettiğiniz nesnenin id özelliğidir.Yani CKEDITOR.replace() fonksiyonunun ilk parametresi.

Aşağıdaki  örneği inceleyerek daha iyi anlayabilirsiniz.

https://gist.github.com/sametatabasch/7565e8b62e5ec151e2b4#file-index-html

https://gist.github.com/sametatabasch/7565e8b62e5ec151e2b4#file-ajax-php

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

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

Devam

CKEditor Kullanımı – Dosya Yöneticisi

Marhabalar,

CKEditor Kullanımı  yazı dizisine Dosya yöneticisi ile devam ediyoruz.Metin  editöründe en çok  ihtiyacımız olan şeylerden biride ortam dosyalarımızın yani resim,video,müzik ,vb.  dosyaların yönetilmesini saplayan dosya yöneticidir. Dosya yöneticisi ile dosyalarınızı tek bir noktadan yönetebilirsiniz.Yeni dosya yükleme düzenleme silme ve gönderilerinize ekleme işlemlerini  dosya yöneticisi ile kolayca yapabilirsiniz.Herhangi bir dosya yöneticiniz yoksa CKEditor de yazınıza resim  eklemek istediğinizde resmin url adresi ile resmi  ekleyebileceksiniz bunun için resmi  daha önceden sizin internete yükleyip url  adresini kaydetmeniz  gerekiyor, bu şekilde  kullanım hiç kullanışlı değil.

[caption id="attachment_2105" align="aligncenter" width="527"]ckeditor-resim-upload Resim yüklemek için herhangi bir buton yok[/caption]

Bu yazımda ücretsiz olarak dağıtılan Roxy Fileman isimli  dosya yöneticisinin CKEditor ile  bağlantısının nasıl  yapılacağını  anlatacağım.İlk olarak  Roxy Fileman ı  sitesinden indiriyoruz ve sitemizin  ana dizinine yüklüyoruz.

[box type="download"]Roxy Fileman Download[/box]

fileman klasörü içindeki  Upload dizininin sunucu tarafından yazılabilir olduğuna dikkat ediyoruz. Sonrasında CKEditor e dosya işlemlerinde fileman ı kullanması  için bir kaç  tanımlama yapmamız gerekiyor.Bunu CKEditor config dosyasında yada CKEditor u  eklediğimiz sayfadan yapabiliriz.

CKEditor config dosyası ile :

[code lang="js"]
/**
 * @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.
    
//Dosya Yöneticisi
    config.filebrowserBrowseUrl = '/fileman/index.html';// Öntanımlı Dosya Yöneticisi
    config.filebrowserImageBrowseUrl = '/fileman/index.html?type=image'; // Sadece Resim Dosyalarını Gösteren Dosya Yöneticisi
    config.removeDialogTabs = 'link:upload;image:upload'; // Upload işlermlerini dosya Yöneticisi ile yapacağımız için upload butonlarını kaldırıyoruz
    //---------
};
[/code]

Config dosyası  ile yaptığımız  tanımlama tüm editor leri  etkiler.

HTML içerisinde :

[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',{
filebrowserBrowseUrl:'/fileman/index.html', // Öntanımlı Dosya Yöneticisi
filebrowserImageBrowseUrl:'/fileman/index.html?type=image', // Sadece Resim Dosyalarını Gösteren Dosya Yöneticisi
removeDialogTabs: 'link:upload;image:upload' // Upload işlermlerini dosya Yöneticisi ile yapacağımız için upload butonlarını kaldırıyoruz
});
</script>
</body>
</html>[/code]

Bu değişiklikleri  yaptıktan sonra CKEditor ile yazılarınıza resim eklemek çok kolay bir hal  alacak:

ckeditor-resim-upload1ckeditor-resim-upload2

 

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

CKEditor Kullanımı – Kurulum
CKEditor Kullanımı – Ayarlar
CKEditor Kullanımı – Toolbar Düzenlemesi
CKEditor Kullanımı – Ajax Post
[/box]

 

 

Devam

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:

toolbar

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]

Devam

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.

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:

[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]

 

 

Devam

Ckeditor Kullanımı – Kurulum

Projelerimizde gelişmiş elemanlar barındıran bir yazı (blog yazısı gibi) oluşturmak için sayfalar hazırlarız , bu sayfamızda yazının girileceği eleman sadece textarea olursa düz metinden ileri gidemeyiz.Daha gelişmiş yazılar yazmak için gelişmiş metin editörleri kullanırız.
Ckeditor en çok kullanılan metin editorlerinden biri resim ,video,flash animasyon,tablo,liste,form gibi birçok elemanı kullanmanıza olanak sağlıyorckeditor

CKEditor Kurulumu

Kurulum kelimesi  ckeditor için biraz fazla geliyor aslında oldukça basit bir işlem. Download Ckeditor Sayfasından ckeditor ü indirdikten sonra zip dosyasının içeriğini sitenizin ana dizinine çıkartın.Artık http://<siteniz>/ckeditor/samples/index.html adresinde ckeditor ün çalışan bir örneğini görebilirsiniz(Localhost üzerinde çalışıyorsanız bu  adres:http://localhost/ckeditor/samples/index.html şeklinde olacaktır.).

Şimdi  örnek bir sayfa ile nasıl kullanıldığına bakalım

[code lang="html"]<!DOCTYPE html>
<html>
    <head>
        <title>CKEditor Örnek</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    <body>
        <form>
            <textarea name="editor1" id="editor1" rows="10" cols="80">
                Gelişmiş elemanları bulunan metin alanı
            </textarea>
        </form>
    </body>
</html>[/code]

Bu  şekilde kodladığımız  bir sayfanın aşağıdaki  resimdeki  gibi  oluşuyor.

ckeditor1Bu  sayfaya ckeditor ü eklemek için kodları şu  şekilde düzenliyoruz:

[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>
            <textarea name="editor1" id="editor1" rows="10" cols="80">
                Gelişmiş elemanları bulunmayan metin alanı
            </textarea>
        </form>
        <script>
            // Ckeditor ü  ön tanımlı  ayarları  kullanarak <textarea id="editor1"> nesnesi üzerinde aktif  ediyoruz
            CKEDITOR.replace( 'editor1' );
        </script>
    </body>
</html>[/code]

Sonuç:

ckeditor2

Ckeditor i  aktif yapmak  bu  kadar basit . Eğer herhangi  bir  ayar  yapmadan  direk  ön tanımlı  ayarlarla ckeditor kullanacaksanız <textarea> nesnesinin class özelliğine “ckeditor” atamasını  yaparak Ckeditor ü aktif hale getirebilirsiniz.Böylece fazladan java sctirpt  kodu yazmazsınız.

 

[code lang="html"]...
    <body>
        <form>
            <textarea name="editor1" id="editor1" rows="10" cols="80" class="ckeditor">
                Gelişmiş elemanları bulunmayan metin alanı
            </textarea>
        </form>
    </body>
</html>[/code]

Sonraki yazılarımda ckeditor bazı  ayarlarından, ckeditor e dosya yöneticisi bağlanmak ve ajax ile ckeditor kullanmaktan bahsedeceğim.Umarım kısa zamanda vakit ayırıp  yazabilirim.

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

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

Devam