Asp.net Roxy Fileman Kurulumu (TinyMCE Entegrasyonu ile Birlikte)
Asp.net Roxy Fileman Kurulumu (TinyMCE Entegrasyonu ile Birlikte)

Bu makalemizde asp.net projemize dosya yönetim eklentisi Roxy Fileman kurulumu yapacağız. Ayrıca Roxy Fileman eklentisinin projemizdeki mevcut TinyMCE editörü ile bağlantısını yapacağız. Dosya yükleme eklentileri için kritik öneme sahip olan güvenlik ayarlarına da kısaca değineceğiz.

Dosya yükleme eklentilerini doğrudan web projelerinize fotoğraf, pdf vb. dosyalar yüklemek üzere de kullanabilirsiniz. Ancak biz metin editörü içerisinde fotoğraf yükleme özelliği için kullanacağız. Bir önceki makalede TinyMCE editörü kurulumunu anlatmıştık. Şimdi kaldığımız yerden devam ederek asp.net projemizde Roxy Fileman kurulumu ve ayarlarını yapacağız.

Roxy Fileman eklentisinin .net versiyonunu kendi sitesinden indirerek başlayalım. İndirdiğimiz zip uzantılı dosya içindeki fileman isimli klasörü tinymce/plugins  klasörü içerisine kopyalıyoruz. Buradan sonra bir takım ayarlamalar yapmamız gerekecek.

Roxy Fileman Kurulumu

Sayfamızdaki <head></head> tagları arasına aşağıdaki <script>  kodlarını ekliyoruz. Burada TinyMCE editörüne fileman eklentisini tanıtmış oluyoruz.

<script type="text/javascript">
    tinymce.init({
        selector: 'textarea', language: 'tr', skin: 'charcoal', width: 800, height: 400,
        plugins: ['advlist autolink lists link image charmap print preview hr anchor pagebreak searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking save table contextmenu directionality emoticons template paste textcolor colorpicker textpattern imagetools codesample toc link image'],
        image_advtab: true,
        toolbar1: 'undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
        toolbar2: 'print preview media | forecolor backcolor emoticons | codesample', file_browser_callback: RoxyFileBrowser
    });
    function RoxyFileBrowser(field_name, url, type, win) {
        var roxyFileman = 'scripts/tinymce/plugins/fileman/index.html';
        if (roxyFileman.indexOf("?") < 0) {     
            roxyFileman += "?type=" + type;   
        }
        else {
            roxyFileman += "&type=" + type;
        }
        roxyFileman += '&input=' + field_name + '&value=' + win.document.getElementById(field_name).value;
        if(tinyMCE.activeEditor.settings.language){
            roxyFileman += '&langCode=' + tinyMCE.activeEditor.settings.language;
        }
        tinyMCE.activeEditor.windowManager.open({
            file: roxyFileman,
            title: 'Roxy Fileman',
            width: 800, 
            height: 600,
            resizable: "yes",
            plugins: "media",
            inline: "yes",
            close_previous: "no"  
        }, {     window: win,     input: field_name    });
        return false; 
    }
</script>

4. satırda TinyMCE editörünün kullanacağı eklentileri tanımlıyoruz. Bunların bir çoğu varsayılan eklentiler, ancak biz ekleme yapacağımız için tekrar belirtmemiz gerek. 6 ve 7. satırlarda da editörün araç çubuğunda görünecek özellikleri belirtiyoruz. Bunlar içinden image ve link isimli olanlar Roxy Fileman eklentisi için gerekli olanlar.

Asp.net Roxy Fileman Kurulumu ve TinyMCE Entegrasyonu
Asp.net Roxy Fileman Kurulumu ve TinyMCE Entegrasyonu

RoxyFileBrowser  isimli fonksiyon ile de dosya yükleme eklentimizin özelliklerini belirtiyoruz. Buradaki roxyFileman isimli değişkenin tuttuğu index.html dosya adresinin projenizdeki konumunun doğru olduğuna emin olunuz.

Fileman Güvenlik Ayarları

Fileman eklentisine yetkisiz erişimlerin önüne geçmek için güvenlik ayarı yapmamız gerekli. fileman klasörü içinde web.config dosyasına authorization bildirimi ekleyerek sağlayabiliriz. Buradaki amaç sitemizin yönetim paneline erişirken sağladığımız doğrulama yöntemini fileman eklentisine de kazandırmak.

<authorization>
   <deny users="?" /> 
</authorization>

Yukarıdaki bildirim sizde hataya sebep olabilir, siz bunun için kendi kullandığınız bildirimi ekleyiniz. Roxy Fileman kurulumu ve TinyMCE entegrasyonunu yapmış olduk. Konu ile ilgili sormak istediklerinizi aşağıdaki yorumlar bölümünden iletebilirsiniz.

CEVAP VER

Lütfen yorumunuzu giriniz!
Lütfen isminizi buraya giriniz