İçeriğe geç

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

 

 

 

“CKEditor Kullanımı – Dosya Yöneticisi” hakkında 8 yorum

  1. Geri bildirim: Anonim

  2. 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

  3. merhaba ben gösterdiğiniz tüm adımları uyguladım ve başarıyla file man resim seçme klasörü geldi karşıma fakat resime basıp yükle dediğim zaman
    To integrate with CKEditor or TinyMCE change INTEGRATION setting in conf.json. For more details see the Installation instructions at http://www.roxyfileman.com/install.
    hatası alıyorum conf.json klasörüne giriyorum INTEGRATION ı dediği gibi tinymce 3 veya tinymce 4 olarak değiştiriyorum bu seferde yükleye basınca hiç bir şey yapmıyor tinymce kurulu olmadığı içinmi böyle yapıyor yoksa başka bir sebebimi var yardımcı olurmusunuz lütfen ^_^

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Bu site, istenmeyenleri azaltmak için Akismet kullanıyor. Yorum verilerinizin nasıl işlendiği hakkında daha fazla bilgi edinin.