İndir Demo

Bu yazımda sizlere PHP ile FCKeditör'ün kurulumunu ve basit bir örnek ile kullanımını anlatacağım.

FCKeditör İndir

FCKeditör'ü bu adresten indirebilirsiniz.

FCKeditör Kurulumu

İlk olarak indirdiğimiz dosya içerisindeki fckeditor.php dosyasını sayfamıza dahil ediyoruz.

<?php include_once("fckeditor/fckeditor.php") ; ?>

Editörümüzü oluşturmaya başlayabiliriz.

<?php
    $fckeditor = new FCKeditor('yazi') ;   //buradaki 'yazi' text alanımızın name="yazi" değerini belirleyecek
    $fckeditor->BasePath = '/fckeditor/' ; //fckeditör'ün kurulu olduğu dosya(İndirdiğiniz dosya)
    $fckeditor->Value = 'Default Value' ;      //Editörümüz yüklendiğindeki default değeri
    $fckeditor->Width = '700';             //FckEditör'ün genişliği.
    $fckeditor->Height = '300';            //FckEditör'ün yüksekliği.

    $fckeditor->Create() ; //fckeditör oluştur
?>

Yukarıdaki kodlarımızla fckeditör'ü kurmuş olduk. FCKeditor('yazi') buradaki 'yazi' ile text alanımızın "name" değerini belirledik. Yani editörü submit ettiğimizde $_POST['yazi'] ile editörden gelen değeri alacağız .

BasePath ile fckeditör'ün kurulu olduğu dosya yolunu (fckeditör'ü indirdiğiniz dosya) belirliyoruz.Diğer satırlardaki kodlarda anlaşılacağı üzere fckeditörün değerini, genişliğini ve yüksekliğini belirliyoruz.

FCKeditör Ayarları

FCKeditör'ün kendi istediğimiz şekilde görünmesini isteyebiliriz.

ToolbarSet ile fckeditörün görnümünü özelleştirmek için index ismini değiştiriyoruz. Eğer "Basic" yaparsak görünüm şu şekilde olacak .

<?php $fckeditor->ToolbarSet = 'Basic'; ?>

fckeditör custon toolbar

Eğer istersek kendi belirlediğimiz ikonların olduğu özel bir görünümde yapabiliriz. Bu kodları indirdiğiniz fckeditör klasöründe bulunan fckconfig.js dosyasında 121. satıra aşağıdaki kodları yapıştırın.

FCKConfig.ToolbarSets["Custom"] = [
    ['Source','-'],
    ['Bold','Italic','Underline','StrikeThrough','-'],
    ['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
    ['Link','Unlink'],
] ;

Ardından ToolbarSet değerini "Custom" yapıyoruz .

<?php $fckeditor->ToolbarSet = 'Custom'; ?>

FCKeditör görünümü şu şekilde olacak . 

fckeditor custom toolbar 2

Editörün dil ayarını yapmak için aşağıdaki kodu ekliyoruz .

<?php
    $fckeditor->Config['AutoDetectLanguage']    = false ;
    $fckeditor->Config['DefaultLanguage']        = 'tr';
?>
FCKeditör türkçe karakter sorununu çözmek için fckeditör'ün kurulu olduğu dosyada bulunan fckconfig.js dosyasını açın ve FCKConfig.IncludeLatinEntities = true; yazan satırı bulup FCKConfig.IncludeLatinEntities = false ; olarak değiştirin .

Sonuç

FCKeditör için bilinmesi gereken ayarları da öğrendiğimize göre öğrendiklerimizin yer aldığı genel bir örnek yaparak yazımı bitireyim :).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>FCKeditör</title>
    </head>
    <body>
        <?php
            //Post edilmişse ekrana yazdır
            if(isset ($_POST['yazi'])) echo $_POST['yazi'];
        ?>
        <p>
            <form action="" method="post">
                <?php
                include_once("fckeditor/fckeditor.php") ;

                $fckeditor = new FCKeditor('yazi') ;   //buradaki 'yazi' text alanımızın name="yazi" değerini belirleyecek
                $fckeditor->BasePath = '/fckeditor/' ; //fckeditör'ün kurulu olduğu dosya(İndirdiğiniz dosya)
                $fckeditor->Value = 'Default Value' ;  //Editörümüz yüklendiğindeki default değeri
                $fckeditor->Width = '700';             //FckEditör'ün genişliği.
                $fckeditor->Height = '300';            //FckEditör'ün yüksekliği.

                $fckeditor->ToolbarSet = 'Default';      //Toolbar
                $fckeditor->Config['AutoDetectLanguage']    = false ;
                $fckeditor->Config['DefaultLanguage']        = 'tr';

                $fckeditor->Create() ; //FckEditör oluştur
                ?>
                <br/>
                <input type="submit" value="Gönder" />
            </form>

        </p>
    </body>
</html>

Kaynaklar

İndir Demo