Veysel Uğur KIZMAZ

Asp.Net MVC ile geliştirdiğiniz projelerinizde zengin metin editörü eklemek isteyebilirsiniz. Bunun için farklı metin editörleri kullanabilirsiniz. Bu yazıda TinyMCE isimli editörün Asp.Net MVC projelerine nasıl dahil edileceğini öğreneceğiz.

Asp.Net MVC 5 Projesine TinyMCE Editörünü NuGet Üzerinden Yükleme

İlk adımda, projenize NuGet ile TinyMCE.MVC paketini yükleyin.

Yükleme işlemi tamamlandıktan sonra Scripts dizininin altında tinymce dizininde editörün script ve stylesheet dosyaları yerleşecektir.

Asp.Net MVC 5 Projesine Yüklenen TinyMCE Editörünün Script ve Template Dosyaları

Editörün şablon olarak tüm sayfalar içinde kullanılabilmesi için Views > Shared > EditorTemplates dizininin altında tinymce_full ve tinymce_full_compressed View’ları da yükleme ile beraber gelecektir.

tinymce_full View’ında editörün script dosyaları boşluk ve satırlarla, debug edilmesi kolay halde çalışmaktadır.

tinymce_full_compressed View’ında ise editörün script dosyaları sıkıştırılmış halde, yani daha küçük boyutta, daha hızlı yüklenebilir durumdadır.

Örnek Uygulama: Asp.Net MVC 5 Projesinde TinyMCE Editörünü Kullanma ve Editörden Gelen Değere Erişim

Projemizin kişisel web sitesi olduğunu ve web sitemizin blog bölümünde makaleler yayınladığımızı düşünelim. Makaleleri, yönetim paneli üzerinden bir editör yardımıyla ekleyeceğiz.

İlk aşamada Makale modelini basit şekilde oluşturalım. Makalenin sadece Id ve Detay bilgileri bulunsun.

public class Makale
{
    [Key]
    public int Id { get; set; }

    [AllowHtml]
    [UIHint("tinymce_full_compressed")]
    [Display(Name="Makale Detayı")]
    public string Detay { get; set; }
}

Şimdi, makale ekleme sayfasını oluşturalım. Bunun için HomeController’a MakaleEkle isminde bir action tanımlayalım.

public ActionResult MakaleEkle()
{
    return View();
}

Action üzerinden yeni bir Create View’ı oluşturalım. View’ın model türüne Makale sınıfını tanımlayalım.

Makale ekleme sayfasında Detay özelliğinin yazıldığı kontrol, varsayılan olarak EditorFor helper metodu ile eklendi. Burada bir değişiklik yapmamıza gerek yok, çünkü bu özelliğin başında tanımladığımız attributeler sayesinde Detay özelliğinin kontrolünü TinyMCE editörü olarak belirttik.

@model MVC.Test.Models.Makale

@{
    ViewBag.Title = "MakaleEkle";
}

<h2>MakaleEkle</h2>

@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()
    
    <div class="form-horizontal">
        <h4>Makale</h4>
        <hr />
        @Html.ValidationSummary(true)

        <div class="editor-label">
            @Html.LabelFor(model => model.Detay)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Detay)
            @Html.ValidationMessageFor(model => model.Detay)
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

Kodlamayı tamamladıktan sonra projeyi çalıştırıp Home/MakaleEkle linkini açtığınızda, “Makale Detayı” bölümünde editörün geldiğini göreceksiniz.

Sayfa içindeki Create butonuna tıkladığında çalışacak olan MakaleEkle isimli HttpPost attributelu actionı tanımlayalım.

[HttpPost]
public ActionResult MakaleEkle(Makale yeni)
{
    return View();
}

Projeyi tekrar çalıştırıp, son eklediğimiz metodun ilk satırına breakpoint ekleyin. Ardından sayfayı tarayıcı üzerinden açıp, editörün içine “Deneme 1 2 3” yazıp kalınlaştırın. İşlemleri tamamladıktan sonra Create butonuna tıklayın ve yeni parametre değişkeninin Detay özelliğinin değerini inceleyin. Değerinde, editör üzerinde yazdığınız ve kalınlaştırdığınız yazının HTML kodlarının geldiğini ( “<p><strong>Deneme 1 2 3</strong></p>”) göreceksiniz.