MVC TinyMCE Text Editor Kurulumu


24.02.2019 12:43:36 Asp Net MVC Uygulamaları Bilgi Yolunda

Projelerimizi oluştururken belkide en çok istediğimiz elimizin altında word gibi kullanacağımız bir text editörün bulunmasıdır.Şimdi sizleri tüm ihtiyacınız olan araçları sağlayacak TinyMCE eklentisini projenize nasıl ekleyeceğinizi anlatacağım.

MLİ:Eğer yapamazsanız konu sonundaki videoda istediğiniz herşeyi daha ayrıntılı bulacaksınız.

1)İlk yapacağımız işlem TinyMCE Editörünü NuGet Üzerinden Yüklemek

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

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.

Paketlerimizi projemize ekledik Şimdi gelelim TinyMCE kütüphanesi projemizde kullanmaya.

2)Öncelikle Blog adında bir sınıf oluşturalım.

Blog sınıfımızda id,aciklama ve içerik değişkenleri bulunması yeterli

1
2
3
4
5
6
7
8
public class Blog
    {
        public int Id { get; set; }
        public string aciklama { get; set; }
 [AllowHtml]
 [UIHint("tinymce_full_compressed")]
        public string icerik { get; set; }
    }

Şimdi, Blog sayfasını oluşturalım. Bunun için HomeController’a Blogisminde bir action tanımlayalım.

1
2
3
4
public ActionResult Blog()
        {
            return View();
        }

Blog Actiona sağ tıklayıp yeni view ekleyelim.View’ın model türüne Makale sınıfını tanımlayalım.Türünü Create seçelim.

Aşağıdaki gibi bir cshtml görünümü kendiliğinden eklenecektir.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()
    
    <div class="form-horizontal">
        <h4>Blog</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.aciklama, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.aciklama, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.aciklama, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.icerik, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.icerik, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.icerik, "", new { @class = "text-danger" })
            </div>
        </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>
}

Kodlamayı tamamladıktan sonra projeyi çalıştırıp Home/Blog linkini açtığınızda tinyMCE Text Editörün sayfaya eklendiğini göreceksiniz.

Sayfa içindeki Create butonuna tıkladığında çalışacak olan Blog isimli HttpPost attributelu actionı tanımlayalım.Biz bir kayıt işlemi yapmıyacağımız için index e yönlendirip ekrana yazdıracağım.

1
2
3
4
5
6
[HttpPost]
        public ActionResult Blog(Models.Blog gelenBlog)
        {
            TempData["GelenVerim"] = gelenBlog.icerik;
            return RedirectToAction("Index", "Home");
        }

Son olarakta Home/Index view ına tinyMCE ile aldığımız html metni tekrar normal forma çeviriyoruz.

@Html.Raw(TempData["GelenVerim"])

Buraya kadar geldiyseniz editörü kullanmayı başarmışsınızdır tebrikler.Smile

Proje dosyasını >>buradan>> indirip inceleyebilirsiniz.

Kodlar ile ilgili anlamadığınız yada takıldığınız bir yer varsa konu sonundaki proje videosunu izlemenizi şiddetle tavsiye ediyorum.


Robotik Kodlama Eğitimi



Yorum Yap :


Robotik Kodlama Eğitimi

Site içi Arama


En Çok Okunanlar

Sorusu Olan Varmı?

Paylaştıgım video,dosya yada projelerle ilgili sorularınızı buradan sorabilirsiniz.
Not:Projemi siz yaparmısınız demeyin lütfen :)

Sorunuz mu var?