FCKeditör Kurulumu ve Kullanımı

Kategori : Demo, PHP Yazar : alexander Tarih : 23 Ağu 2010, Pt 15:55 35 Yorum

Etiketler : text editor, kurulum, kullanım, javascript, fckeditor, editor, PHP

Görüntülenme : 5630

İ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

Paylaş

Etiketler

text editor, kurulum, kullanım, javascript, fckeditor, editor, PHP

Yorumlar >> (35 Yorum)

Yunus Emre 20 Şub 2011, Pa 20:35 tarihinde yazılmış.
Serkan bey bu yaptığınız fck editör güzel ancak şunu yaparsanız sitenizi sürekli kullanabilirim. Yazdığımız yazıya uyguladığımız eylemleri aktif değil de yani hemen uygulanmasın da örneğin Yunus Emre şeklinde gösterirse çok işime yarayacak. Benim bu konularda çok fazla bilgim yok. İlginize şimdiden teşekkür ederim...
Yunus Emre 20 Şub 2011, Pa 20:37 tarihinde yazılmış.
Serkan bey tekrar ben çünkü anlatamadım ben istiyorum ki yazdığımız yazıyı bold yaptığımızda mesela direkt yukardaki gibi bold yapmasın Yunus Emre şeklinde çıksın ama noktalar olmasın tabi yazdığımda bold yapıyor… Mümkün mü bu???
- alexander 20 Şub 2011, Pa 20:44 tarihinde yazılmış.
 Ne demek istediğini tam olarak anlamadım ama galiba şunu demek istedin : Yunus Emre şeklinde html kodlarının görünmesinimi istiyorsun?
Ajans Magic 20 Şub 2011, Pa 20:45 tarihinde yazılmış.
bilgilerin işime yaradı teşekkürler
utku 19 Nis 2011, Sa 15:05 tarihinde yazılmış.
Merhaba; basic editöre font rengi değiştirmeyi eklemek istiyorum hangi kodları eklemeliyim?
- Alexander 19 Nis 2011, Sa 16:18 tarihinde yazılmış.
  Denemedim ama galiba bunu eklemelisin : [‘TextColor’]
oguz oguz 28 Nis 2011, Pe 16:02 tarihinde yazılmış.
fck editörde resim yüklemeyi nasıl yapabiliriz.
upload güvenli mi
- Yahya SÖNMEZ 29 Nis 2011, Cu 23:08 tarihinde yazılmış.
  FCKEditor/editor/filemanager/upload/php/config.php içerisinde $Config[‘UserFilesPath’] = ‘/UserFiles/’ ; satırını kendinize göre düzenleyin. “UserFıles” upload edilen dosyaların bulunacağı dizin.
  $Config[‘AllowedExtensions’][‘File’] = array() -> ile izin verilen uzantıları,
  $Config[‘DeniedExtensions’][‘File’] = array() -> ile filtrelenecek uzantıları belirleyebilirsiniz., Benzer işlemleri [Image] ve [Flash] içinde yapabilirsiniz…
  Güvenlidir. kendi CMS imde kullanıyorum. Biraz da sizin katkınız olursa dahada iyi olur.
yahyatrup 26 May 2011, Pe 03:32 tarihinde yazılmış.
fckeditör ile fotoğreaf veya flash boyutu sınırlaması yapabilirmiyiz? Ziyaretçilere 50x50px den büyük dosya göndermeyin dediğim halde sözümü tutmayanlar için…?
Yardımcı olursanız sevinirim, ilk sitemi yapmaya çalışıyorum da..
- Alexander 26 May 2011, Pe 16:03 tarihinde yazılmış.
  daha önce fckeditorün dosya sistemini hiç kullanmadım ama senin için internetten araştırma yaptım fakat hiç kaynak bulamadım.
  Fakat fckeditorun bulunduğu dizinde editor->connectors->php->commands.php dosyasını açarsan orda bulunan FileUpload fonksiyonu upload işlemini yapıyor. Sen bu foksiyonu düzenleyerek istediğin limit sınırını koyabilirsin…
Orhan Kadir Ozkara 30 May 2011, Pt 18:12 tarihinde yazılmış.
Merhabalar.
Ck Editör ile ilgili bir sorum olacaktı sizlere. Ck editör ve Ck finder ı başarılı bir şekilde entegre ettim, verileri veritabanına da yazdırma kısmını çözüm ama ufak bir sıkıntı ile karşı karşıyayım.
Ck editör resimleri eklerken

 <img />
Şeklinde ekliyor dolayısı ile veritabanından geri çağırdığımda resim yerine browserda \”“\”“\”“\”” görünüyor.
- Alexander 30 May 2011, Pt 19:37 tarihinde yazılmış.
 sorunu tam olarak anlayabildiğimi söyleyemem
- Orhan Kadir Ozkara 31 May 2011, Sa 10:45 tarihinde yazılmış.
 Kodları buraya yazamıyorum :D yazabilsem net bir şekilde anlatacağım ama :D
 sanırım bu şekilde görünecektir kod.
 Db ye bu şekile yazıyor resim eklendiği zaman
 img alt=\”\” src=\”../queb/images/Chrysanthemum.jpg\”
 dolayısı ile ekrana bastırdığımda ise sadece
 \”“\”“\”“\”” şeklinde çıkıyor
- Alexander 31 May 2011, Sa 13:27 tarihinde yazılmış.
 veri tabanından çektiğin veriyi stripslashes fonksiyonu ile ters bölüleri temizlemeyi denermisin ...
- Alexander 31 May 2011, Sa 13:29 tarihinde yazılmış.
 kodlarını pre tagları arasına yazmalısın
- Orhan Kadir Ozkara 31 May 2011, Sa 14:08 tarihinde yazılmış.
 stripslashes fonksiyonu işimi çözdü çok sağol arkadaşım valla baya dua kazandın :D
 yanlız “kodlarını pre tagları arasına yazmalısın” kısmını tam anlamadım
- Alexander 31 May 2011, Sa 14:14 tarihinde yazılmış.
 :) yorum yazarken yorumunda kod eklerken html taglarından code veya pre tagları arasına yazarsan burada kodların görünecektir.
 Sorununun çözülmesine sevindim.
- Orhan Kadir Ozkara 31 May 2011, Sa 14:30 tarihinde yazılmış.
 Bu sefer başka bir soru daha çıktı :D
 hata mesajımız :D bol şans dileyin bana bir tarafını yapıyom başka tarafını bozuyorum
 You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near ‘‘2011-05-31 14:22:02’, ‘20110531142202.jpg’, 0)’ at line 1
 bu dur :D
- Alexander 31 May 2011, Sa 15:41 tarihinde yazılmış.
 Burayı soru cevap bölümüne çevirmezsek sevinirim ... hataya gelince sql sorgusunu göremeden bir şey diyemem. sana bol şans diliyorum :)
uwe 30 May 2011, Pt 18:27 tarihinde yazılmış.
int üzerinde sanırım en kolay ve acıklayıcı bilgiler bunlardı. tşkler
Orhan Kadir Ozkara 31 May 2011, Sa 17:22 tarihinde yazılmış.
yanlış anlaşıldım :D kusura bakma :D sadece son olayı geyik diye yazdım bi tarafı yaptım bi tarafı bozdum mansında :D çözdüm zaten :D yardımların için teşekkürler tekrar
- Alexander 31 May 2011, Sa 20:52 tarihinde yazılmış.
  alemsin orhan :) sende kusura bakma yanlış anladığım için. İyi çalışmalar dilerim…
Cenk Atalay 21 Eyl 2011, Ça 15:09 tarihinde yazılmış.
mrb,
fck editör kullandığımda html taglari sayfada direk görünüyor aşağıdaki gibi.yorumlarda okuduğum kadarı ile stripslashes sorunu çözdü denmiş ama ben denedim olmadı.sayfada aşağıdaki gibi görünüyor eklediğim resim görünmüyor ve bütün html taglari görünüyor.Bu sorunu nasıl çözebilirim.Teşekkürler.
```
&nbsp;<img alt="" src="localhost/cenk/userfiles/image/cenk/Windows-8-start-menu.png" />
```
- Alexander 21 Eyl 2011, Ça 15:47 tarihinde yazılmış.
 Bunu denermisin ?
 $html = ' <img alt="" src="localhost/cenk/userfiles/image/cenk/Windows-8-start-menu.png" />'; echo html_entity_decode($html,ENT_QUOTES, 'UTF-8');
Cenk Atalay 21 Eyl 2011, Ça 22:04 tarihinde yazılmış.
Oldu.Teşekkür ederim.
- Alexander 22 Eyl 2011, Pe 12:37 tarihinde yazılmış.
  rica ederim.
Erkan ÇELİK 6 Eki 2011, Pe 14:22 tarihinde yazılmış.
Öncelikle merhaba,
FCKeditör mü yoksa CKeditör mü asolan fck editör diye araştırdığımda karşıma ckeditör çıktı ve dedim ki f zamanla ayrılmıştır belkim şimdik ckeditörü kullanırken jquery ile ilgili bir kaç sıkıntı yaşadım $(“textEditor”).val(); dediğimde sonuç “” gözüküyor bir bilginiz var mı acaba bu konuda ?
yusuf 24 Kas 2011, Pe 18:47 tarihinde yazılmış.
s.a fck editörü kurdum resim yüklüyorum ama klasöre upload etmiyor.
$Config[‘UserFilesPath’] = ‘/Resimler/edt/’ ;
düzenledim localhostta düzenliyom Resimlerden evvel localhost/site/Resimler/edt/ yazdım yine yok bu klasörlerde var oluşturmuşum ama upload etmiyor.ilginize şimdiden teşekkürler
- Alexander 24 Kas 2011, Pe 19:17 tarihinde yazılmış.
  editor/filemanager/connectors/php/config.php dosyasında $Config[‘Enabled’] değerini true yapmalısın.
  $Config['Enabled'] = true ;
  senin ayarlarına göre resimi www klasörünün altında /Resimler/edt/ dizinine ekler. Yanlış olabilir ama büyük ihtimalle şu şekilde yapmalısın.
  $Config['UserFilesPath'] = 'site/Resimler/edt/';
yusuf 26 Kas 2011, Ct 12:21 tarihinde yazılmış.
$url="http://localhost"; $sitepath = parse_url($url,PHP_URL_PATH);
$Config['UserFilesPath'] = $sitepath.'/deneme/Resimler/edt/' ;
bu şekilde halleettim diğer arayan arkadaşlara ışık olur inş.
—Bi sorum daha var fck editör ücretlimi sıkıntı olurmu kullanırsam portalda
- Alexander 26 Kas 2011, Ct 21:44 tarihinde yazılmış.
  ücrestsiz ama ticari amaçla kullanıldığında sorun olurmu bilmiyorum.
tiesto 28 Kas 2011, Pt 09:23 tarihinde yazılmış.
sağol başkan Bilgin için işime yaradı teşekkür etmeden geçmeyim dedim tşkrler : )
- Alexander 28 Kas 2011, Pt 10:35 tarihinde yazılmış.
  rica ederim :)
yusuf 2 Ara 2011, Cu 20:57 tarihinde yazılmış.
ya ben form tagları arasına ekledim başka text lerde ekledim başlık vb kaydet dediğimde veri tabanına fck editör içeriği kaydedilmiyor diğerleri kaydediliyor.editörün kendi içindeki kaydete bastığımdada diğerleri kaydedilmiyor editörün kendi içeriyi kaydediliyor ben butona bastığımda hepisinin kaydedilmesini istiyorun nasıl yapabilirim yardım?? lütfen teşekkürler
- alexander 9 Oca 2012, Pt 19:44 tarihinde yazılmış.
  yazıdaki örnek uygulamayı iyi incelemeni öneririm.