Merhaba arkadaşlar,
Bu yazımda MVC Core uygulamasına nasıl WYSIWYG editörü ekleyebileceğimizi yazacağım. WYSIWYG- İngilizce'de "What You See Is What You Get" cümlesinin kısaltılması olu,p bu sitede konuyu yazdığımız platform kısacası. Bu örnekte summernote adlı eklentiyi kullanacağım, eklentiye MVC Core uygulamanızdan bower ile indirebilir veya https://summernote.org/ sitesinden indirebilirsiniz. Summernote u kullanmamın sebebi sadece bootstrap ve jquery ile kullanılabilir olup aynı zamanda MIT lisansına sahip, az yer tutan, basit bir şekilde eklenebilir olması. --
-Önceki yazımda olduğu gibi gene Entity Framework Core ile model sınıflarımızı oluşturalım. Önceki yazımdan (http://www.turkhacks.com/konu-asp-net-mvc-core-surukle-birak-dosya-yukleme.html) farklı olarak burda model sınıfları arasındaki tablo bağlantıları farklı olacak. Yani önceki yazımda tablolar arası 1e çok ilişkilendirme varken, bunda 1e 1 ilişki var. Siz ihtiyacınıza göre kendi Model sınıflarınızı tanımlayabilirsiniz tabi. --
Önceki yazımda belirttiğim gibi, sıfırdan bir MVC Core yazı dizisine başladığım zaman bunları detaylı anlatacağım. "Key", "DisplayName" gibi "Data Annotations" model sınıflarında çok önemli bir yer tutuyor. MVC Core da gerek yok çünkü kalktı ama MVC 5 yazacaksanız Editörden gelen html dizisini Açıklama string ine kaydedebilmek için [AllowHtml] denilen Data Annotations a ihtiyacınız olacak. Şimdi ise Controller ımızı ve View ımızı inceleyelim.
Kendi sayfanıza kurmak için, gerekli eklentileri head kısmına koyduktan sonra alttaki küçük kod bloğunu body de kullanmanız yeterli. Fakat biz veritabanına kayıt işlemi yapacağımız için bunu yukarıdaki gibi bir form içerisine koymamız gerekiyor. Daha sonra controllerda standart bir create işlemi yapıyoruz. Eklentinin sitesinin "deep dive" sekmesinde editörünüzü özelleştirebilmeniz için bir çok yöntem mevcut. Bakmanızı öneririm.
Not: Eğer bootstrap 4.0 kullanıyorsanız "popper.js" dosyasını da eklemeniz gerekli. Ayrıca dropzone.js gibi sadece o viewda render yapamadım. Bundler ile sıkıştırma yaparak tüm proje sayfalarında kullanılabilir yapmam gerekti. Siz sadece ihtiyacınız olan view da eklentileri çağırabilirseniz ne ala.
Daha Önemli Not: Eğer veritabanına kaydı yapamıyorsanız, <form ... asp-action=".." yanına asp-antiforgery="false"- seçeneğini ekleyip deneyin. Fakat bu zaman XSRF veya CSRF türü ataklara karşı savunmasız kalmış olursunuz. Bu tür ataklara dair ayrıntılı bilgiye buradan ulaşabilirsiniz: https://docs.microsoft.com/en-us/aspnet/core/security/anti-request-forgery
İyi kodlamalar dilerim.
Bu yazımda MVC Core uygulamasına nasıl WYSIWYG editörü ekleyebileceğimizi yazacağım. WYSIWYG- İngilizce'de "What You See Is What You Get" cümlesinin kısaltılması olu,p bu sitede konuyu yazdığımız platform kısacası. Bu örnekte summernote adlı eklentiyi kullanacağım, eklentiye MVC Core uygulamanızdan bower ile indirebilir veya https://summernote.org/ sitesinden indirebilirsiniz. Summernote u kullanmamın sebebi sadece bootstrap ve jquery ile kullanılabilir olup aynı zamanda MIT lisansına sahip, az yer tutan, basit bir şekilde eklenebilir olması. --
-Önceki yazımda olduğu gibi gene Entity Framework Core ile model sınıflarımızı oluşturalım. Önceki yazımdan (http://www.turkhacks.com/konu-asp-net-mvc-core-surukle-birak-dosya-yukleme.html) farklı olarak burda model sınıfları arasındaki tablo bağlantıları farklı olacak. Yani önceki yazımda tablolar arası 1e çok ilişkilendirme varken, bunda 1e 1 ilişki var. Siz ihtiyacınıza göre kendi Model sınıflarınızı tanımlayabilirsiniz tabi. --
Kod:
public class Ilan
{
[Key]
public int IlanID { get; set; }
[Display(Name ="İlan Başlığı")]
public string IlanBasligi { get; set; }
public DateTime IlanTarihi { get; set; }
public virtual Aciklama Aciklama { get; set; }
}
Kod:
public class Aciklama
{
[Key, ForeignKey("Ilan")]
public int IlanID { get; set; }
public string Aciklama { get; set; }
public virtual Ilan Ilan { get; set; }
}Önceki yazımda belirttiğim gibi, sıfırdan bir MVC Core yazı dizisine başladığım zaman bunları detaylı anlatacağım. "Key", "DisplayName" gibi "Data Annotations" model sınıflarında çok önemli bir yer tutuyor. MVC Core da gerek yok çünkü kalktı ama MVC 5 yazacaksanız Editörden gelen html dizisini Açıklama string ine kaydedebilmek için [AllowHtml] denilen Data Annotations a ihtiyacınız olacak. Şimdi ise Controller ımızı ve View ımızı inceleyelim.
Kod:
[HttpPost]
public async Task<IActionResult> Editor([Bind("IlanID,Aciklama")] Aciklama aciklama)
{
string content = HttpContext.Request.Form["Aciklama"];
if (ModelState.IsValid)
{
aciklama.Aciklama = content;
_context.Aciklama.Add(aciklama);
await _context.SaveChangesAsync();
return RedirectToAction("IlanDetaylari", new { id = aciklama.IlanID });
}
return View(aciklama);
}
Kod:
@model *****.Models.IlanEklentiler.Aciklama
<div class="row justify-content-center">
<div class="col-md-10 col-lg-8">
<form asp-controller="Ilan" asp-action="Editor">
<input type="hidden" asp-for="IlanID" />
<textarea asp-for="Aciklama" id="summernote"></textarea>
<input type="submit" value="ilerle" class="btn btn-primary" />
</form>
</div>
</div>
<script>
$('#summernote').summernote({
tabsize: 2,
height: 200
});
</script>Kendi sayfanıza kurmak için, gerekli eklentileri head kısmına koyduktan sonra alttaki küçük kod bloğunu body de kullanmanız yeterli. Fakat biz veritabanına kayıt işlemi yapacağımız için bunu yukarıdaki gibi bir form içerisine koymamız gerekiyor. Daha sonra controllerda standart bir create işlemi yapıyoruz. Eklentinin sitesinin "deep dive" sekmesinde editörünüzü özelleştirebilmeniz için bir çok yöntem mevcut. Bakmanızı öneririm.
Kod:
<div id="summernote"><p>Hello Summernote</p></div>
<script>
$(document).ready(function() {
$('#summernote').summernote();
});
</script>Not: Eğer bootstrap 4.0 kullanıyorsanız "popper.js" dosyasını da eklemeniz gerekli. Ayrıca dropzone.js gibi sadece o viewda render yapamadım. Bundler ile sıkıştırma yaparak tüm proje sayfalarında kullanılabilir yapmam gerekti. Siz sadece ihtiyacınız olan view da eklentileri çağırabilirseniz ne ala.
Daha Önemli Not: Eğer veritabanına kaydı yapamıyorsanız, <form ... asp-action=".." yanına asp-antiforgery="false"- seçeneğini ekleyip deneyin. Fakat bu zaman XSRF veya CSRF türü ataklara karşı savunmasız kalmış olursunuz. Bu tür ataklara dair ayrıntılı bilgiye buradan ulaşabilirsiniz: https://docs.microsoft.com/en-us/aspnet/core/security/anti-request-forgery
İyi kodlamalar dilerim.