TinyMCE limit characters typed by users

Question

I googled a lot for limiting the characters in TinyMCE but nothing is working! How do i create a message box if users type more than 500 characters?

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:58

score 1 · Accepted Answer · edited May 21 '13 at 08:58

Got it! New version uses ed.on("KeyDown", function(ed,evt) { instead of ed.onKeyDown.add(function(ed, evt) {

So function becomes:

setup : function(ed) {
                    var max_tekens = <?php echo $max_aantal_tekens_excl_opmaak; ?>;
                    var beschikbaar_voor_opmaak = <?php echo ($max_aantal_tekens_incl_opmaak -
                    $max_aantal_tekens_excl_opmaak); ?>;
                    ed.on("KeyDown", function(ed,evt) {
                      aantal_tekens_zonder_opmaak = tinyMCE.activeEditor.getContent().replace(/(<
([^>]+)>)/ig,"").length;
                      aantal_tekens_met_opmaak = tinyMCE.activeEditor.getContent().length;
                      var key = ed.keyCode;
                      $('#omschrijving_wijzigen_tekens').html(max_tekens - aantal_tekens_zonder_opmaak);
                      if (aantal_tekens_met_opmaak > (max_tekens+beschikbaar_voor_opmaak)){
                          alert('U hebt het maximaal aantal tekens nog niet helemaal bereikt, maar u gebruikt veel opmaak dat ook ruimte kost. Verwijder tekens of gebruik minder opmaak (vet, cursief, ondertrepen).');
                          ed.stopPropagation();
                          ed.preventDefault();
                      }
                      else if (aantal_tekens_zonder_opmaak > max_tekens-1 && key != 8 && key != 46){
                           alert('U hebt het maximaal aantal tekens bereikt.');
                           ed.stopPropagation();
                           ed.preventDefault();
                      }
                      else if(aantal_tekens_zonder_opmaak > (max_tekens - 25)){
                          $('#omschrijving_wijzigen_max_tekens').css('color','red');
                      }

                      else {
                          $('#omschrijving_wijzigen_max_tekens').css('color','gray');
                      }
                    });
                }

score 0 · Answer 2 · answered May 18 '13 at 19:35

0

With TinyMCE 4, you can hook into the on change event:

$(document).on('tinymce:changed', function() {
    content = tinyMCE.activeEditor.getContent();
    // check length of content and do whatever you want
});

answered May 18 '13 at 19:35

Logan Serman

29,447
27
102
141

tinymce.init({ selector: "textarea", menubar : false, statusbar : false, forced_root_block : false, convert_fonts_to_spans : false, width : 650, height : 120, toolbar: "bold italic underline" }); $(document).on('tinymce:changed', function() { content = tinyMCE.activeEditor.getContent(); alert('ss'); // check length of content and do whatever you want }); – Jilco Tigchelaar May 18 '13 at 19:40
Not sure. I am using this event also in the 4.0 beta perfectly fine (that is where I pulled this code from). – Logan Serman May 18 '13 at 21:19

TinyMCE limit characters typed by users

2 Answers2