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.

ckeditor-resim-upload
Resim yüklemek için herhangi bir buton yok

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.

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 :

/**
 * @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
    //---------
};

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

HTML içerisinde :

<!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>

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

 

 

 

Samet ATABAŞ

Sakarya Üniversitesi Bilgisayar ve Öğretim Teknolojileri Öğretmenliği Mezunu.PHP Developer

CKEditor Kullanımı – Dosya Yöneticisi” için 6 yorum

  • Geri bildirim: Anonim

  • 12 Ocak 2016 tarihinde, saat 13:55
    Permalink

    takıldığım tek sorun şu.
    REsim yüklüyorum ama resimi seçmiyor.
    anladığım kadarı ile üye girişi yapan kullanıcıya yetki vermek gerek galiba ama onu bir türlü başaramadım.

    IMPORTANT – PHP!
    Roxy Fileman requires PHP 5.2 or greater with GD and MB String libraries installed.
    Security checks are implemented, but you have to fill “checkAccess()” function located in fileman/php/security.inc.php file in order to actually restrict the access. Usually this is pretty simple, it could be something like “if($_SESSION[‘is_admin_logged’] !== true)exit;”.
    You can also use HTTP Basic authentication or any other authentication mechanism you want. See Roxy Fileman security for more details

    bu şekilde bir yazı var ama ne yapmam gerek çözemedim. yardım edebilirmisiniz aceba

    Şu video daki 5:31 saniyedeki işlem ile aynı galiba
    https://www.youtube.com/watch?v=3fPRM_yqsGE

    SORUNU NASIL ÇÖZEBİLİRİM ACEBA

    Yanıtla
    • 16 Ocak 2016 tarihinde, saat 15:37
      Permalink

      Sunucunuzda GD ve mbstring kütüphanelerinin kurulu olması gerekiyor. Eğer host kullanıyorsanız host şirketinizle iletişime geçin

      Yanıtla
  • 13 Mart 2016 tarihinde, saat 15:52
    Permalink

    sunucuya gözat diyince 80 port gibi bi hata veriyor

    Yanıtla
  • 25 Temmuz 2017 tarihinde, saat 15:55
    Permalink

    localhostda çalışırken sunucuya ulaşılamıyor hatası alıyorum neden olabilir.

    Yanıtla

Bir Yorum Yazın