剣道UIエディタの最大文字数と最小文字数

Question

剣道UIエディタにMVC拡張機能を使用しています。 HTMLコンテンツを除く文字数の最小値と最大値を設定するオプションはありますか？

私はStringLength属性を使用しましたが、これにはHTMLコンテンツが含まれています。

Answer 1

これらのオプションがない剣道エディタについては正しいですが、いくつかのJavaScriptとjQueryでこれを行うことができます。この例では、Kendo Core（ASP.NET MVCのような剣道ラッパーはASP.NET MVCで動作するはずですが、JavaScriptでは$（ "＃editor"）kendoEditor（）を呼び出さない）。

ここは私の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); 
});