WYSIWYG Html Editor Kullanımı

Html editor deyince akla hemen nedense TinyMCE, CKeditor v.s editorler geliyor değil mi? ASP.NET Webforms kullanırken dahi bunları tercih etmemişimdir.Gözünü sevdiğim AjaxControlToolkit eklentisi ve bu toolkite ait editör compenenti ne güzeldi.Ama MVC de bu compenenti kullanamayız. İşte size basit ve kullanışlı bir editör  Summernote editörü. Boostrap  destekli bu editör basit yapısı, kolay entegrasyonu ve resim ekleme özelliği ile bence harika.Hadi gelin bir MVC projesi oluşturalım ve bu editörü projede aktif kullanalım.

Projede bir makale sitesinin makale kaydetme bölümünü yapalım. MakaleDb veritabanı ve içinde MakaleTablo isimli bir tablo oluşturalım.Tablomuzun alanları;

imdi bu veritabanına ait Modeli oluşturalım.HomeController isimli bir Controller oluşturalım ve şöyle kodlayalım

       public ActionResult Index()
        {
            return View();
        }
        [HttpPost]
        [ValidateInput(false)]//Editörden gelen bilgide güvenlik hatası oluşmasını engeller
        public ActionResult Index(string baslik, string kategori, string detay)
        {
            MakaleDbEntities veri = new MakaleDbEntities();
            MakaleTablo makale = new MakaleTablo();
            makale.Mbaslik = baslik;
            makale.Mkategori = kategori;
            makale.Mdetay = detay;
            veri.MakaleTablo.Add(makale);
            veri.SaveChanges();
            return View("Index");
        }

Şimdi View bölümüne geçelim ve index dosyamızı şu şekilde hazırlayalım.

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/scripts/jquery-1.9.0.min.js"></script>
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <script src="~/scripts/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.css" rel="stylesheet">
</head>
<body>
    <h1>Makale Kaydet</h1>
    <form method="post" action="~/Home/Index">
        <div class="form-group">
            <label for="formGroupExampleInput">Başlık</label>
            <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Başlık Giriniz" name="baslik">
        </div>
        <div class="form-group">
            <label for="exampleFormControlSelect1">Kategori Seçiniz</label>
            <select class="form-control" id="exampleFormControlSelect1" name="kategori">
                <option>Asp.NET MVC</option>
                <option>ASP.NET Webforms</option>
                <option>CSharp</option>
                <option>Visual Basic</option>
            </select>
        </div>
        <div class="form-group">
            <label for="formGroupExampleInput2">Detay</label>
            <textarea class="form-control summernote " id="exampleFormControlTextarea1" name="detay"></textarea>
        </div>
        <button type="submit" class="btn btn-primary mb-2">Kaydet</button>
    </form>
    <script type="text/javascript">
        $(document).ready(function ()
        {
            $('.summernote').summernote(
                {
                    height: 250,
                });
        });
    </script>
</body>
</html>

İşaretli yerler Sumernote kullanmak için yapmanız gerekenler.Projeyi çalıştınız.

Çalıştırıp veri girişi yapıp kaydet butonuna basınız ve veritabanını kontrol ediniz.



Etiketler
WYSIWYG Editor Validateinput
Mesaj Yaz