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"]
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:
[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]