JSFiddle - React, Tailwind, and code Playground

by joshuatz

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/3.5.8/tiny_mce.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/3.5.8/themes/advanced/editor_template.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/3.5.8/langs/en.js"></script>


<textarea id="1" class="mceEditor" cols="80" rows="7" wrap="" maxlength="10">test sample</textarea>

JavaScript

tinyMCE.init({
    mode: "textareas",
    theme: "advanced",
    editor_selector: "mceEditor",
    theme_advanced_statusbar_location: "bottom",
    theme_advanced_path: false,
    statusbar: true,
    setup: function(editor) {
    	var allowedKeys = [8, 37, 38, 39, 40, 46];
      editor.onKeyDown.add(function(editor,evt) {
      console.log(editor);
      console.log(evt);
        if (txtLen >= maxCount) {
          /* editor.setContent("");
          tinyMCE.activeEditor.selection.setContent(txt.substring(0, maxCount));
          tinyMCE.activeEditor.focus(); */
          console.log('hit cap');
          if (allowedKeys.indexOf(evt.keyCode)===-1){
          	evt.preventDefault();
          }
        }
      });
    }
  });
  
function updateTinyMceCounter(editor){
  var maxCount = parseInt(document.getElementById(editor.id).getAttribute('maxLength'),10);
  var txt = $(editor.getBody()).text();
  var txtLen = txt.length;
  var remainingChars = maxCount - (txtLen);
  $(tinyMCE.activeEditor.getContainer()).find("#" + editor.id + "_path_row").html("Remaining chars: " + (remainingChars > 0 ? remainingChars : 0));
}