none
Summernote Editör- Yeni bir alternatif olabilir. RRS feed

  • Genel Tartışma

  • Arkadaşlar bilen bilmeyen vardır. Html editör gereken bölümlerde  meşhur birkaç html editör var  güzel kullanabiliyoruz ancak resim vs kaydetme kısımları bazen sancılı olabiliyor. Geçenlerde farkettiğim bir summernote'u mvc projemde kullandım çok memnun kaldım. Yüklenen görseli base64 formatında tutuyor ve html çıktıyı ayrı görseli ayrı kaydetmenize gerek kalmıyor çıkan html olduğu gibi kaydediyorsunuz ve bu kadar.

    Summernote ücretsizdir. summernote.org adresinden indirebilirsiniz kullanımını inceleyebilirsiniz.

    Ben mvc projemde  şu şekilde kullandım. Kendimce izlediğim bir yol. Olaya daha farklı yaklaşan olursa paylaşsın lütfen.

    İlk önce summernote'a ait css js dosyalarını filan projene dahil et sonra summurnote editörünü gözükmesini istediğin yere 
      <div  id="summernote"></div> 
    ekle
    bu şekilde editör gelmiş oluyor sonra bu editör içersindekileri kaydetmek için

    Editörü kullanmak istediğimiz sayfaya 

        @Html.TextAreaFor(m => m.Description, new { @id = "Description", @style = "display:none;" })
    Şeklinde bir texarea ekledik nerde olduğu önemli değil zaten display:none ile gizledik. Kritik Nokta id' si var bu id'yi js tarafında kullanıcaz sonra aşağıdaki gibi bir kaydet butonu koyduk önemli olan kısmı yine id'si
     <input type="submit" value="Kaydet" id="editorbtn" class="btn btn-default" />
    ve son olarak aşağıdaki js scriptini ekliyoruz
     
     <script type="text/javascript">
            $(document).ready(function () {
                $('#summernote').summernote();
    
                var editor = $('#Description').html();
    
                $('#summernote').html(editor);
    
                $('#editorbtn').hover(function () {
                    
                    var editor = $('.note-editable').html();
                    $('#Description').html(editor);
                   
                });
    
    
            });
        
               
        </script>

    Kaydet butonuna basıldığında resim ile birlikte kaydedilmiş olacak. Kaydedilen html'i dikkatli inceleyin resmi base64 formatında kaydetti
    html.raw içersinde canlı olarak görüntüleyebilirsiniz..

     Kendim blog tutmadığım için burda paylaşmak istedim. Lazım olursa aklınızda bulunsun.


    eneskarakara[at]gmail[nokta]com


    23 Ocak 2017 Pazartesi 22:41