CKFinder 3.4.2 Kurulumu

CKSource tarafından geliştirilen CKFinder Web Dosya Yöneticisi'nin, ASP.NET MVC projesine CKEditor entegrasyonu'nu birlikte inceleyelim

Bir önceki yazımızda CKEditor ve Ek Özellikleri'ni anlatmıştık. Bu yazımızda da geçmişte Wordpress kullananların aşina olduğu Ortam Kütüphanesi’nin benzeri olan, projelerimize resim, pdf, Word dokümanı vb. içerikler eklememize olanak sağlayan CKfinder’ın son versiyonu 3.4.2'nin kurulumunu birlikte inceleyeceğiz. Hatırlatmak isterim ki CKFinder aslında ücretli bir ürün, biz şimdilik ücretsiz deneme versiyonu üzerinden ilerleyeceğiz.

CKFinder 3.4.2 Kurulumu

Kuruluma ilk olarak yeni bir ASP.NET projesi açarak başlıyoruz.

Resim 1

Resim 2

Bu kısımda CKEditor kurulumdaki adımları tekrar gerçekleştirmemiz ve projeye dahil etmemiz gerekmekte. CKEditor kurulumu için CKEditör yazımıza göz atabilirsiniz.

Resim 3

 

Kurulumu başarıyla gerçekleştirdikten sonra gelelim CKFinder’ı kurup aktif hale getirmeye. NuGet Package Manager > Browse sekmesine girip arama kısmına “CKSource.CKFinder.Connector.Sample” yazıyoruz ve karşımıza çıkan eklentiyi projemize ekliyoruz. CKSource taraflı yapılan güncelleme sonrasında gerekli dosyalara "CKSource.CKFinder.Connector.Core" şeklinde ulaşılmaktadır.

Resim 4

Resim 5

Yükleme işlemi başarıyla tamamlandıktan sonra ilk yapacağımız iş, proje içerisinde güncellenen "startup.cs" class’ına “partial” eklemek. Bunun sebebi CKFinder eklenti paketini,n class içeriğini parçalı bir yapıda düzenlemesi.

Resim 6

 

Startup.cs dosyasını güncelledikten sonra ckfinder view’ini açıyoruz ve Scripts section’unu aşağıdaki gibi güncelliyoruz.

Resim 7

 

@section Scripts {
     <script src="~/Content/ckeditor/ckeditor.js"></script>
     <script src="~/CKFinderScripts/ckfinder.js"></script>
     <script>
        var editor = CKEDITOR.replace('editor');
        CKFinder.setupCKEditor(editor);
     </script>
}

 

Tüm işlemleri doğru bir şekilde gerçekleştirdiğimizde CKFinder’ın sorunsuz olarak çalıştığını göreceksiniz.

Resim 8

Resim 9

Buraya kadar her şeyi en basit şekliyle ve NuGet Package Manager yardımıyla indirmiş olduğumuz eklentinin 1-2 şey hariç herhangi bir kısmını değiştirmeden kullandık. Projenizin web.config dosyasını açarsanız içerisine <ckfinder></ckfinder> şeklinde bir bölüm eklendiğini göreceksiniz. Eski versiyonundan farklı olarak CKFinder daha kolay bir kullanım sunmak ve tek yerden erişim amacıyla web.config üzerinden tüm ayarları yapmanıza izin veriyor. Burada her ayara tek tek değinmeyeceğim ancak resmi konfigürasyon dökümanına baktarak ayarlar ile detaylı bilgilere ulaşabilirsiniz.

Ben projelerimde resimlerin yüklendiği yeri düzenli olmak adına kendim belirlemeyi tercih ediyorum. Bu sebeple web.config içerisinde <backend> kısmını aşağıdaki şekilde güncelliyor, dosyaların Content klasörü altındaki ckfinder klasörüne yüklenmesini sağlıyorum. Siz de dilediğiniz dosya yolunu göstererek CKFinder’ın kullanmasını sağlayabilirsiniz.

<backend name="default" adapter="local">
     <option name="root" value="Content/ckfinder/" />
     <option name="baseUrl" value="http://www.example.com/Content/ckfinder/" />
</backend>

 

Grafikle başlayıp front-end'le devam ettiği yolculuğunun son durağında epey süredir back-end'e kafayı takmış bir yazılım meraklısı. İhtiyacı oldukça öğrenen, öğrendikçe paylaşan ve olanı olduğu gibi söyleyen gerçek bir realist.

İlginizi Çekebilir

Yazıya Git

Google Fonts ve Lokal kullanımı... DEVAMI

Google Font servisine ve bu fontları dış kaynaktan yüklemeden, proje içerisine yerleştirerek nasıl kullanıyoruz, birlikte inceleyelim...

Yazıya Git

Türkçe ASP.NET MVC Kaynaklarında Yapılan Hatalar... DEVAMI

Kaş yapalım derken göz çıkartmamak adına bir yazı...

Yazıya Git

Windows Kullanırken Hızınıza Hız Katacak Kısayollar... DEVAMI

Hem günlük yaşamınızda hem de iş hayatınızda işinize yarayacak tüyolar

Yorum yazın

Yorumlar

  • comment

    ayşe 18 May 2018, 10:05

    startup.cs dosyası oluşmadı bende sunucuyu gözat a tıklayınca hata veriyor.. tüm projeyi paylaşabilir msiniz

  • comment

    ramiz sümer 12 Şub 2018, 11:02

    Merhaba, nuget manager da sizin resim 5 deki gibi 3.4.1 sürümü gelmiyor. include prerelease seçeneğini seçince 3.3.0-rc5 versiyonu geliyor.