Counter for TinyMCE is not working as expected

Question

I know there are so many solutions out there but cannot get right solution. I have written code for customized counter in tinyMCE version 3 which has maxlength attribute which is not working. I want to stop giving more text when counter reaches to 0, I have used setcontent("") and substring(0,maxcount) this seems to be problem because when I give any 2 characters in between its trimming last two charcters which should not be this way. Also I have tried using evt.preventDefault() Its preventing but unable to type IN again for keydown and keypress also excluded bacspace and delete but its not working right. here is my code.

    tinyMCE.init({
        mode: "textareas",
        theme: "advanced",
        editor_selector: "mceEditor",
        paste_auto_cleanup_on_paste: 'true',
        theme_advanced_disable: 'justifyleft,justifyright,justifyfull,justifycenter,indent,image,anchor,sub,sup,unlink,outdent,help,removeformat,link,fontselect,hr,styleselect,formatselect,charmap,separator,code,visualaid,strikethrough,fullscreen',
        theme_advanced_buttons1: 'bold,italic,underline,numlist,bullist,undo,redo,cleanup,spellchecker',
        theme_advanced_buttons2: "",
        theme_advanced_buttons3: "",
        plugins: 'spellchecker,fullscreen,paste',
        spellchecker_languages: '+English=en-us',
        spellchecker_rpc_url: '<%out.print(request.getContextPath());%>/jazzy-spellchecker',
        theme_advanced_statusbar_location: "bottom",
        theme_advanced_path : false,
        statusbar: true,
        setup: function(editor)
        {
             editor.onKeyUp.add(function(evt)
            {
                var maxLengthRichTextArea = 5;
                 var inputRichTextArea = $(editor.getBody()).text();
                 var inputRichTextAreaLength = inputRichTextArea.length;
                 var value = maxLengthRichTextArea-inputRichTextAreaLength;
                 if(value >= 0)
                 {  
                 $(tinyMCE.activeEditor.getContainer()).find("#"+editor.id+"_path_row").html("Remaining chars: "+(value));
                }           
                if(inputRichTextAreaLength > maxLengthRichTextArea) {
                 editor.setContent("");
                tinyMCE.activeEditor.selection.setContent(inputRichTextArea.substring(0, maxLengthRichTextArea));
                }                  
            });
        }
    });

</script>

HTML

<textarea id="450225" class="mceEditor"  maxlength="10" style="display: none;"></textarea>

This is working good

But here when I add 6 its triimming of last digit 5

How to solve this issue and max count is actually a higher number which comes from database.

Answer 1

Here is a working example of what you are trying to achieve :

HTML :

<textarea id="text"></textarea>

---

Javascript :

tinymce.init({
  selector: "textarea#text",
  height: 500,
  menubar: false,
  setup: function(editor) {
    var maxlength = 5;
    var allowedKeys = [8, 37, 38, 39, 40];
    editor.on("keydown", function(e) {
      var count = $(editor.getBody()).text().length;
      if(allowedKeys.indexOf(e.which) != -1) {
         return;
      }
      if (count >= maxlength) {
        e.stopPropagation();
        return false;
      }
    });
  }
});

And the codepen, I hope that will help you ! In my code the max length is 5, but you can change it via the var maxlength.