ASP.NET MVC TinyMCE Responsive File Manager

Merhaba, uzun bir zaman sonra tekrar karşınızdayım 🙂 Sözlerime CMS projeleri için önemli bir plugin ile başlamak istiyorum. Eğer TinyMCE Editörünü kullanıyor iseniz bu plugin çok kullanışlı ve çok güzel. Ayrıca Responsive olduğunu söylemektede fayda var. Bu plugini projelerimize import etmek için birkaç php ayarlarını yapmamız gerekiyor.

Open-Source bir plugin olup, içerisinde herhangi bir dosya ekleme(resim,video,text, html dosyaları gibi.), dosya silme, yeni bir klasör ekleme, dosyanın ismini düzenleme gibi daha bir çok özellik barındırmaktadır. Hatta önizleme ve dosyaları indirme gibi bir çok seçenek mevcuttur.

1.ADIM

NuGet Package Manager ile Phalanger 4.0 adlı eklentiyi indiriyoruz. Bu eklenti sayesinde PHP Extension metotlarını ve sınıflarını kullanabileceğiz.

2.ADIM

Web.Config ‘e gerekli kütüphaneleri yazmamız gerekiyor.

<configuration>
  <configSections>
    <section name="phpNet" type="PHP.Core.ConfigurationSectionHandler, 
 PhpNetCore, Version=4.0.0.0, 
Culture=neutral, PublicKeyToken=0a8e8c4c76728c71" />  
  </configSections>
  <phpNet>
    <classLibrary>
      <add assembly="PhpNetClassLibrary, Version=4.0.0.0, Culture=neutral, 
     PublicKeyToken=4af37afe3cde05fb" section="bcl" />
      <add assembly="PhpNetMbstring, Version=4.0.0.0, Culture=neutral, PublicKeyToken=2771987119c16a03" />
      <add assembly="PhpNetGd2, Version=4.0.0.0, Culture=neutral, PublicKeyToken=2771987119c16a03" />
    </classLibrary>
  </phpNet>
   
  <system.webServer>    
    <handlers>
      <add name="Phalanger" path="*.php" verb="*" type="PHP.Core.RequestHandler, PhpNetCore, 
Version=4.0.0.0, Culture=neutral, PublicKeyToken=0a8e8c4c76728c71" resourceType="Unspecified" 
preCondition="integratedMode" />
    </handlers>
  </system.webServer>
<runtime>
    <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">
      <probing privatepath="Phalanger" />     
    </assemblyBinding>
  </runtime>
</configuration>

Bu yazılanları Web.Config’de uygun ve doğru yerlere yerleştirmeniz gerekiyor.

3.ADIM

Responsive File Manager dosyalarını uygun bir şekilde yerlerine yerleştirmek.

• Tinymce/Plugins dosyasının içine öncelikle bu dosyayı yerleştirmeniz gerekli. Aşağıdaki linkten indirebilirsiniz.

responsivefilemanager

• Daha sonra, projenizin WebApp kısmının içine filemanager ve Media adlı dosyaları yerleştirmeniz gerekiyor. Aşağıdaki resimde bir örnek ve dosyayı indirebileceğiniz bir link var.

https://drive.google.com/open?id=1UILSRLy39rvwV79CfEgBC3MlqkCRPF6H

Dosyayı yukarıdan indirmeniz gerekiyor.

4.ADIM

Sonraki adım ise gayet basit. TinyMCE ayarlarını yapmamız gerekiyor. Tinymce’nin init ayarlarında plugins adlı kısımda responsivefilemanager ‘ı çağırmamız gerekiyor. 3.Adımın ilk başında yaptığımız işlemdeki dosyanın adını çağırıyoruz. Daha sonra küçük bir kod satırı var.

<script type="text/javascript">

    //Editör initialize için gerekli config kodları
    tinymce.init({
        selector: '#tinymce', theme: "modern",
plugins: [
"advlist autolink autoresizeimage fullscreen  lists charmap paste print preview hr anchor pagebreak",
"wordcount visualblocks visualchars insertdatetime media nonbreaking code codesample importcss ",
"table contextmenu directionality emoticons paste textcolor template responsivefilemanager imagetools"
        ], 
menubar: "file edit view insert tools table format",
 toolbar2: "responsivefilemanager",
   

 external_filemanager_path: "/filemanager/",
  external_plugins: { "filemanager": "/filemanager/plugin.min.js" },
 filemanager_title: "Responsive File Manager"
    });

</script>

Kaynaklar/Sources :

https://www.responsivefilemanager.com/#download-section

https://www.codeproject.com/Tips/1004596/Using-Responsive-File-Manager-in-ASP-NET-MVC