Kendo UI Editor caratteri massimi e minimi

Question

Sto utilizzando le estensioni MVC per l'editor dell'interfaccia utente Kendo. Esiste un'opzione per impostare il numero minimo e massimo di caratteri escludendo il contenuto HTML.

Ho usato l'attributo StringLength ma questo include il contenuto HTML.

Answer 1

Hai ragione su Kendo Editor che non ha queste opzioni. È possibile farlo con alcuni JavaScript e jQuery. Questo esempio utilizza Kendo Core (che i Kendo Wrapper come ASP.NET MVC dovrebbero ancora funzionare in ASP.NET MVC non si chiama $ ("# editor"). KendoEditor() nel JavaScript).

Ecco il mio jsFiddle example.

HTML:

<h3 class="text-primary">Text Only Count: <span id="textCount"></span></h3> 
<div id="example"> 
    <textarea id="editor" rows="10" cols="30" style="height:440px"> 
     <p>Kendo UI Editor allows your users to edit HTML in a familiar, user-friendly way. 
      <br />In this version, the Editor provides the core HTML editing engine, which includes basic text formatting, hyperlinks, lists, and image handling. The widget <strong>outputs identical HTML</strong> across all major browsers, follows accessibility standards and provides API for content manipulation.</p> 
     <p>Features include:</p> 
     <ul> 
      <li>Text formatting & alignment</li> 
      <li>Bulleted and numbered lists</li> 
      <li>Hyperlink and image dialogs</li> 
      <li>Cross-browser support</li> 
      <li>Identical HTML output across browsers</li> 
      <li>Gracefully degrades to a <code>textarea</code> when JavaScript is turned off</li> 
     </ul> 
    </textarea> 
</div> 

CSS:

.warning { color: red; } 

JavaScript:

$(function() { 
    $("#editor").kendoEditor(); 
    var minChar = 100; 
    var maxChar = 600; 
    var iframe = $("iframe"); 

    // Change event for iframe body content 
    iframe.contents().find("body").on('keydown', function (e) { 
     //Clean up 
     $("#textCount").removeClass("warning"); 

     // Get Body (.text() strips out HTML tags) 
     var data = $(this).text(); 
     if (this.which < 32) { 
      return; // Do nothing 
     } 

     var isEditKey = (e.keyCode == 8 || e.keyCode == 46); 

     if (data.length == maxChar && !isEditKey) { 
      e.preventDefault(); 
     } else if (data.length > maxChar) { 
      // Maximum exceeded 
      $(this).text(data.substring(0, maxChar)); 
     } else if (data.length < minChar) { 
      $("#textCount").addClass("warning"); 
     } 
     $("#textCount").text(data.length); 
    }); 

    // OnLoad call to get starting count 
    var data = iframe.contents().find("body").text(); 
    $("#textCount").text(data.length); 
});