PHP’de CKEditor ile File Manager Kullanımı

makale.baslik

Daha önceki yazımda CKEditor’ü nasıl kullanıldığını anlatmıştım. Bu yazımda CKEditor ile Responsive File Manager nasıl kullanılır bunu göreceksiniz. Bu iki ücretsiz yazılım sayesinde web sayfasındaki içerik kısımlarını özgürce oluşturabilirsiniz. İçerik kısmında freelance olarak görselleri yerleştirebilirsiniz.

Responsive File Manager dosyaları, resimleri ve videoları eklemek ve düzenlemek için kullanabileceğiniz kullanışlı ve şık bir uygulamadır. jQuery kütüphanesi, CSS3, PHP ve HTML5 ile yapılan ücretsiz açık kaynak dosya ve resim yöneticisidir.

TinyMCE, CKEditor ve CLEditor için harici bir eklenti olarak kullanabilirsiniz, dosyaları için tek başına bir dosya yöneticisi olarak da kullanabilirsiniz. Kullanımı çok esnektir, çoklu kullanıcı desteği bulunmaktadır. Her klasörü yapılandırarak özelleştirebilirsiniz. Görseller üzerinde foto editör sayesinde online değişiklik yapabilirsiniz.

Diğer dosya yöneticilerinden ayıran en önemli özelliklerini şöyle sıralayabiliriz:

  • Öncelikle ücretsizdir.
  • Dosyaları sürükle bırak veya boyut sınırlaması olmaksızın JAVA uygulaması ile yükleme yapılabilir.
  • Her dizin farklı yapılandırma ve izinlere sahip olabilir.
  • Bootstrap kullanmasından dolayı responsive tasarım sahiptir ve modern web standartlarına göre oluşturulmuştur.
  • Eski tarayıcılar ile uyumludur.
  • Yüklenen medyaların tam ön izlemesine izin verir.
  • Türkçe dahil çoklu dil desteği vardır.
  • Dosyalar birçok parametreye göre sıralanabilir.
  • Aviary image editor ile görüntüler üzerinde düzenleme yapılabilir.

Daha fazla bilgi için Responsive FileManager

Demo uygulaması için: Demo Responsive FileManager

Şimdi CKEditor ile nasıl kullanılacağını görelim. Öncelikle standart CKeditor javascript dosyamızı sayfamıza ekliyoruz.

<script src="ckeditor/ckeditor.js"></script>

 Ve ckeditor olarak kullanmak istediğimiz form kontrolünün classını “ckeditor” olarak atıyoruz.

<textarea name="metin" id="metin" class="ckeditor"></textarea>

Daha sonra CKEditor’ün file manager’ı görebilmesi için gerekli kodları ekliyoruz. Burada file manager’ın dosya yolunu doğru yazdığınıza dikkat etmelisiniz. 

<script>

    CKEDITOR.replace('metin', {

        filebrowserBrowseUrl: 'filemanager/dialog.php?type=2&editor=ckeditor&fldr=',

        filebrowserUploadUrl: 'filemanager/dialog.php?type=2&editor=ckeditor&fldr=',

        filebrowserImageBrowseUrl: 'filemanager/dialog.php?type=1&editor=ckeditor&fldr='

    });

</script>

 File managerda ayarlamaları filemanager\config\config.php dosyasında yapabilirsiniz. Bunlardan bazılarını şu şekildedir:

/*
|--------------------------------------------------------------------------
| Dosyaların yükleneceği url'den sonraki tam yol
|--------------------------------------------------------------------------
|
| başlangıç ve bitiş / olmalı
|
*/
'upload_dir' => '/ornekfilemanager/source/',
/*
|--------------------------------------------------------------------------
| filemanager yoluna göre kaynak (source) dizinin yolu
|--------------------------------------------------------------------------
|
| sonu / olacak
|
*/
'current_path' => '../source/',
/*
|--------------------------------------------------------------------------
| filemanager yoluna göre thumbs klasörünün yolu
|--------------------------------------------------------------------------
|
| sonu / olacak
| upload klasörünün içine koymayın
|
*/
'thumbs_base_path' => '../thumbs/',
/*
|--------------------------------------------------------------------------
| FTP kullanıcısı ile veri ekleme ayarları
|--------------------------------------------------------------------------
|

|
*/
'ftp_host'         => false,
'ftp_user'         => "user",
'ftp_pass'         => "pass",
'ftp_base_folder'  => "base_folder",
'ftp_base_url'     => "http://site to ftp root",
/*
|--------------------------------------------------------------------------
| Kaynak klasöründeki dosyaların toplam en fazla olacağı MB değeri
|--------------------------------------------------------------------------
|
|
*/
'MaxSizeTotal' => false,
/*
|--------------------------------------------------------------------------
| Maximum yükleme MB değeri
|--------------------------------------------------------------------------
|
|
*/
'MaxSizeUpload' => 8,
/*
|--------------------------------------------------------------------------
| Dosya Klasör izinleri
|--------------------------------------------------------------------------
|
*/
'fileFolderPermission' => 0755,
/*
|--------------------------------------------------------------------------
| Varsayılan dil desteği
|--------------------------------------------------------------------------
*/
'default_language' => "tr_TR",

 

Bunların dışında Config.php dosyasında çok fazla ayarlama yapma imkanınız bulunmaktadır. İhtiyacınıza göre bakabilirsiniz. 

Kullanımı basittir. CKEditor de image simgesine tıkladığınızda açılan pencerede Sunucuya Gözat diyerek responsive file manager ı açabilirsiniz.


 


 


 

Örnek uygulama dosyaları indirmek için: ornekfilemanager.rar

Paylaş:

Yorumlar

  1. onur

    Merhaba plugin gerçekten çok güzel ama 4-5k resim olunca klasörde aşırı yavaşlıyor lazy load da aktif ama çok işe yaramadı acaba sayfalama gibi özelliği var mı? teşekkürler

    1. Merhaba, web sayfalarında büyük boyutlu görsellerle çalışmadım. Büyük boyutlu resimlerin webde yavaş yüklenmesini engellemek için yapılacak çok bir şey yok. Malum internet hızları çok yeterli olmuyor, serverda da gereksiz performans kaybına da yol açar.

  2. merhaba acaba ckeditör e code snippet eklentisinin nasıl eklendiğini, bir bilginiz var ise aktarabilir misiniz?

  3. anlatımınız için teşekkürler, herşeyi dediğiniz gibi yaptım ancak; yüklemelerde hata vermemesine rağmen dosyaları upload etmiyor.Dediğim gibi herhangi bir hata vermiyor ancak dosyalarda bir türlü upload olmuyor, dosya yolu herşey doğru, sebebi ne olabilir ?

    1. Dosya yollarını kontrol ediniz.

  4. hocam merhabalar, ckeditor için filemanager kurulumunu yaptım fakat yapmak istediğim bir kaç şey daha var. Örneğin kullanıcı login yapmışsa logged_in session setliyorum. filemanager açıldığında url yi aldığımızda dosyalarımız direkt görünüyor. Bunu kullanıcı girirş yaptuysa göster bölümünü nasıl yaparız. bir de kullanıcıya göre default yükleme klasörünü nasıl değiştiririz. multi user diye bişi var ama anlamadım pek. Yardımcı olursanız çok sevinirim


    1. Ben genel kullanımını anlattım daha fazla bilgi için https://www.responsivefilemanager.com/

  5. hocam merhabalar kolay gelsin konunun üzerinden çok vakit geçmiş ama bir konuda sorun yaşıyorum. sistemi localde kurduğumda sorunsuz çalışıyor fakat sunucuya attığım zaman resmi upload ettiğim zaman uploads klasörüne yüklemeyi yapıyor fakat thumbs klasörüne yükleme yapmadığı için hata veriyor thumb klasörüne neden yüklemiyor olabilir ? klasör yolları doğru çünkü yeni klasör açtığımda hem thumba hem uploadsa atıyor fakat resim upload ettiğimde sadece upload klasörüne atıyor thumba yüklemiyor. nasıl çözebiliriz ?

    1. Gerekli izinleri verdiğinizden emin olun.

  6. İyi günler sayın hocam içeriğe resim yükledikten sonra bir sebepler içeriği sildiğim de içerikteki resimler source dosyasında duruyor birikiyor içeriği sildiğim de bu içerikle bağlantılı resimlerinde silinmesini istiyorum bir fikriniz var mı ? Ayrıca Mesut bey sizinki gibi güvenlik kodu yaptım, firefoxta kodun üzerine tıkladığımda resim olarak iniyor ama crome veya başka tarayıcıda sağ tıkladığımda php dosyasını indiriyor sizinkini denedim resim olarak iniyor sizinkinin örneği var mı? Teşekkür ederim.

  7. Merhaba anlatımınız için çok teşekkür ederim güzel bir bilgi olmuş sormak istediğim bir sorum var Sorunsuz olarak şuan editörümü kullanıyorum resim upload ediyorum v.s sayfayı açtığım zaman editörden resim eklemek istediğim zaman ilk etapta şöyle bir görsel geliyor sayfayı yenilediğimde ise resimler görünüyor ama yenilemeden görseller şu şekilde oluyor bilginiz var mı ? https://i.hizliresim.com/J3hIXf.png sayfayı yenileyince sorun yok çalışıyor

  8. Merhaba şuan konuda 2017 yılına ait sürümünü anlattınız bu sebep ile bazı hatalar mevcut son sürümü güncellerseniz kullanan arkadaşlar hatalar ile karşılaşmasın

    1. Teşekkürler yakın zamanda güncellerim.

  9. merhaba anlatım icin tesekkurler kurup calistirdim ancak resim boyutlarını kırpark upload ediyor 'image_max_width' => 1, 'image_max_height' => 1, 'image_max_mode' => 'auto', burdki ayararda hangi secenegi dnediysem farketmdi nasil cozeriz

    1. Bunun yeni sürümü çıktı onunla ilgili bir paylaşım daha yapacağım belki o işinizi görür.