TinyMCE text editor max char limit

Question

I am using TinyMCE for <textarea>. My requirement is to limit the character size to 2000 and also to show the remaining characters somewhere below the tool bar. I somehow managed to get the characters number; now I am stuck with displaying the remaining characters and prevent from exceeding limit.

Here is my TinyMCE code

tinyMCE.init({
    // General options
    mode : "textareas",
    theme : "simple",
    plugins : "autolink,lists,pagebreak,style,table,save,advhr,advimage,
               advlink,emotions,media,noneditable,visualchars,nonbreaking,
               xhtmlxtras,template",

    // Theme options
    theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,
                               justifyleft,justifycenter,justifyright,
                               justifyfull,|,styleselect,formatselect,
                               fontselect,fontsizeselect", 
    theme_advanced_buttons2 : "bullist,numlist,|,outdent,indent,|,undo,redo,|,
                               link,unlink,anchor,image,code,|,forecolor,
                               backcolor",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_statusbar_location : "bottom",
    theme_advanced_resizing : true,
    charLimit : 10, // this is a default value which can get modified later
    setup : function(ed) {
        //peform this action every time a key is pressed
        ed.onKeyUp.add(function(ed, e) {
        //define local variables
        var tinymax, tinylen, htmlcount;
        //manually setting our max character limit
        tinymax = ed.settings.charLimit;
        //grabbing the length of the curent editors content
        tinylen = ed.getContent().replace(/(<([^>]+)>)/ig,"").length;
        //setting up the text string that will display in the path area
        htmlcount = "HTML Character Count: " + tinylen + "/" + tinymax;
        //if the user has exceeded the max turn the path bar red.
        if (tinylen>tinymax){


        } 
        });
    }
});

For testing purpose I am trying to limit up to 10 char.
Any suggestions are welcome.

might be helpful: http://stackoverflow.com/questions/5533053/textarea-character-limit I haven't use tinymce before but redactor uses a textarea so I assume that tinymce is also using a textarea. — Wern Ancheta, Aug 03 '12 at 06:37
Thanks for your reply but normal limiting of textarea wont work with tincymce. — Prathamesh mhatre, Aug 03 '12 at 06:42
Possible duplicate of [Limit the number of character in tinyMCE](http://stackoverflow.com/questions/11342921/limit-the-number-of-character-in-tinymce) — naXa stands with Ukraine, Dec 08 '15 at 13:40

score 9 · Answer 1 · answered Aug 03 '12 at 07:41

I suggest you execute your code onKeyDown, because on KeyUp the letter is already in the editor.

    //peform this action every time a key is pressed
    ed.onKeyDown.add(function(ed, e) {

      //define local variables
      var tinymax, tinylen, htmlcount;

      //manually setting our max character limit
      tinymax = ed.settings.charLimit;

      //grabbing the length of the curent editors content
      tinylen = ed.getContent().replace(/(<([^>]+)>)/ig,"").length;

      //setting up the text string that will display in the path area
      htmlcount = "HTML Character Count: " + tinylen + "/" + tinymax;

      //if the user has exceeded the max turn the path bar red.
      if (tinylen > tinymax){

        // place text string in path bar
        if ( $('#max_char_string').size() ){
          $('#max_char_string').html( '&nbsp;' + htmlcount);
        }
        else {
          $("div#"+ed.id+"_path_row").append('<span id="max_char_string">&nbsp;'+htmlcount+'</span>')
        }

        // prevent insertion of typed character
        e.preventDefault();
        e.stopPropagation();
        return false;
      }

John Magnolia · Answer 2 · 2013-08-25T11:19:08.337

2

I had the same issue and found this link very useful: http://www.ryann.ca/?p=186

Although I changed this slightly so that it reads the attribute of maxlength direct from the textarea.

tinyMCE.init({
    // Options
    setup : function(ed) {
        ed.onKeyUp.add(function(ed, e) {
            var tinylen, htmlcount, maxlength = $("#" + tinyMCE.activeEditor.id).attr("maxlength");
            if (maxlength) {
                // grabbing the length of the curent editors content
                tinylen = ed.getContent().length;

                htmlcount = "HTML Character Count: " + tinylen + "/" + maxlength;
                if (tinylen > maxlength) {
                    htmlcount = "<span style='font-weight:bold; color: #f00;'>" + htmlcount + "</span>";
                }

                // write the html count into the path row of the active editor
                tinymce.DOM.setHTML(tinymce.DOM.get(tinyMCE.activeEditor.id+ '_path_row'), htmlcount);
            }
        });//ed.onKeyUp.add
    }//setup
});

edited Aug 25 '13 at 11:19

answered Aug 20 '12 at 14:09

John Magnolia

16,769
36
159
270

When I ran your solution, I got "ed.onKeyUp is undefined" error. How can I fix it? Thanks! I am using version 4.0.4. – curious1 Aug 25 '13 at 06:30
1

You need to make sure this is inside of the `setup : function(ed)` see updated answer. – John Magnolia Aug 25 '13 at 11:18
John, thanks sooo much for replying to me. I followed the link you mentioned (http://www.ryann.ca/?p=186) and function(ed) is indeed the property value of setup, which is an option. Are you using tinyMCE 4.x? Thanks! – curious1 Aug 25 '13 at 12:58
Hi John, I found this: http://stackoverflow.com/questions/16939148/tinymce-v4-jquery-how-to-catch-onkeyup. It appears that the event API changed in tinyMCE 4. Would you mind post another reply compliant with tinyMCE 4? Thanks! – curious1 Aug 25 '13 at 13:29

score 0 · Answer 3 · answered Oct 09 '14 at 09:44

Hope it will work :)

setup: function(ed) {            
            var maxlength = parseInt($('#'+(ed.id)).attr("maxlength"));
            var count = 0;
            ed.on('keydown', function(e) {
                count++;
                if (count >= maxlength)
                {
                    alert("false");
                    return false;
                }
            });
        },

TinyMCE text editor max char limit

3 Answers3

Linked