İçeriğe geç

roxy fileman

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.

[caption id="attachment_2105" align="aligncenter" width="527"]ckeditor-resim-upload Resim yüklemek için herhangi bir buton yok[/caption]

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.

[box type="download"]Roxy Fileman Download[/box]

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 :

[code lang="js"]
/**
 * @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
    //---------
};
[/code]

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

HTML içerisinde :

[code lang="html"]<!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>[/code]

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

 

[box type="tick" style="rounded"]
Diğer yazılar:

CKEditor Kullanımı – Kurulum
CKEditor Kullanımı – Ayarlar
CKEditor Kullanımı – Toolbar Düzenlemesi
CKEditor Kullanımı – Ajax Post
[/box]