Asp.Net Tinymce Kurulum ve Image Browser


Web projelerinde kullanılan iki farklı popüler editör var. CKEditor ve Tinymce WYSIWYG Editor. Ben projelerimde öğrenebilirliğin kısa olması,kurulumu ve küçük boyutu gibi sebeplerle
 Tinymce editörünü tercih ediyorum.

Asp.net Mvc için gerekli kurulumlar ve plugin ekleme örneği yapacağız.Ücretsiz versiyonunda image browser ve upload için iyi bir plugin bulunmaması sıkıntı yarattığı için özellikle image upload eksikliğini gidermeye çalışacağım.Dropzone js kütüphanesini kullanarak sorunu aşacağız.

Öncelikle proje için gerekli 3 farklı kütüphaneye ihtiyacımız var.Bunları indirip projeye ekliyoruz.


Editörün çalışacağı index sayfasını oluşturarak,editörün çalışması için gerekli config kodlarını yazıyoruz.

Foto yükleme için ayrı bir ekran tasarlamamız gerekiyor. ImageFileBrowser adında sayfa oluşturup Dropzone kütüphanesini sayfaya ekleyerek ilerliyoruz.Kodlar aşağıda.


Notlar


  • ImageFileBrowser ekranına son yüklenen fotoların bir listesi tutularak galeri mantığı yapılabilir.
  • Fotoğraf seçildikten sonra asıl kayıt işlemini yapan SaveImageFile metodunu bilinçli boş bıraktım. Projeye göre farklı çözümler mevcut. Fakat dikkat edilmesi gereken fotonun konumunun url bilgisi döndürülmesi.
  • 3rd party bir upload kütüphanesi kullanılmadan da yapılabilir.


Örnek Proje


Artık blog üzerinden yazıyla aktardığım teknik , çözüm ve yolları github üzerinde Mvc Sample Project üzerinde toplayacağım. Asp.Net Mvc ile yapılan Tincymce kurulumu ve Image Browser örneğini bu proje üzerinden indirerek inceleyebilirsiniz ;

Github : Asp.Net Tinymce Kurulum ve Image Browser

Yorumlar

Bu blogdaki popüler yayınlar

Asp.Net Mvc Bundle Kullanımı

Brackets Eklentileri

Asp.Net MVC ile Hava Durumu