Add limit characters on Wysiwyg

[akididou]

Hi,

Is it possible to add a limit characters on Wysiwyg same as on the text area ?

So very nice job for this plugin ;)

Peace

[elliotcondon]

Hi @akididou

Thanks for the question.
We don't have built in solution for this, but it should be easy enough to customize the tinymce settings.

Here's a thread discussing the tinymce JS to add a character count:
https://amystechnotes.com/2015/05/06/tinymce-add-character-count/

And here's some documentation on how to customize the WYSIWYG field tinymce instance:
https://www.advancedcustomfields.com/resources/adding-custom-javascript-fields/

• scroll down this page to the 'wysiwyg_tinymce_init' action

Good luck!

[delacosta456]

hi
i read this but don't really now where to start from ... what to do

I need to limit characters for a wysiwyg field .. can you please help with an example ?

[Wheels00]

+1 i'd love an example of doing this

[fhauck]

Here is a solution for a little Word/Character Counter on the WYSIWYG Editor:

Put this in your functions.php:

function my_acf_input_admin_footer() {
	
?>
<script type="text/javascript">
(function($) {
	
acf.add_action('wysiwyg_tinymce_init', function( ed, id, mceInit, $field ){
	$('#wp-'+id+'-editor-container .mce-statusbar').append('<div class="acfcounter" style="background-color: #f7f7f7; color: #444; padding: 2px 10px; font-size: 12px; border-top: 1px solid #e5e5e5;"><span class="words" style="font-size: 12px; padding-right: 30px;"></span><span class="chars" style="font-size: 12px;"></span></div>');
	counter = function() {
	    var value = $('#'+id).val();
	
	    if (value.length == 0) {
	        $('#wp-'+id+'-editor-container .mce-statusbar .acfcounter .words').html('Word Count: 0');
	        $('#wp-'+id+'-editor-container .mce-statusbar .acfcounter .chars').html('Characters: 0');
	        return;
	    }
	
	    var regex = /\s+/gi;
	    var wordCount = value.trim().replace(regex, ' ').split(' ').length;
	    var totalChars = value.length;

	    $('#wp-'+id+'-editor-container .mce-statusbar .acfcounter .words').html('Word Count: '+wordCount);
	    $('#wp-'+id+'-editor-container .mce-statusbar .acfcounter .chars').html('Characters: '+totalChars);

	};
	
    $('#wp-'+id+'-editor-container .mce-statusbar .acfcounter .words').html('Word Count: 0');
    $('#wp-'+id+'-editor-container .mce-statusbar .acfcounter .chars').html('Characters: 0');
	        
    $('#'+id).change(counter);
    $('#'+id).keydown(counter);
    $('#'+id).keypress(counter);
    $('#'+id).keyup(counter);
	$('#'+id).blur(counter);
    $('#'+id).focus(counter);

	
});

})(jQuery);	
</script>
<?php
		
}

add_action('acf/input/admin_footer', 'my_acf_input_admin_footer');

[luizhop]

@fhauck many thanks for this, works really well.

I have only noticed two things and made a few changes to the code to fix them and simplify it:

• when the editor is empty the words count is 1
• HTML tags were being counted into the number of characters

jQuery('#wp-'+id+'-editor-container .mce-statusbar').append('<div class="acfcounter" style="background-color: #f7f7f7; color: #444; padding: 2px 10px; font-size: 12px; border-top: 1px solid #e5e5e5;"><span class="words" style="font-size: 12px; padding-right: 30px;"></span><span class="chars" style="font-size: 12px;"></span></div>');

const counter = function() {
   var value = jQuery('#'+id).val();
   var wordCount = (value.length == 0) ? 0 : value.trim().replace(/\s+/gi, ' ').split(' ').length;
   var totalChars = value.replace(/(<([^>]+)>)/ig,"").length;
	
   jQuery('#wp-'+id+'-editor-container .mce-statusbar .acfcounter .words').html('Words: '+wordCount);
   jQuery('#wp-'+id+'-editor-container .mce-statusbar .acfcounter .chars').html('Characters: '+totalChars);
};

counter();					
jQuery('#'+id).change(counter);
jQuery('#'+id).keydown(counter);
jQuery('#'+id).keypress(counter);
jQuery('#'+id).keyup(counter);
jQuery('#'+id).blur(counter);
jQuery('#'+id).focus(counter);

[Wayne-FlapJack]

I ran into an error while running the code above. Here is an improved version of the code.

Key Improvements:
TinyMCE API: The counter now uses TinyMCE’s getContent({ format: 'text' }) to properly handle text inside the editor.
Correct Event Handling: Using TinyMCE's internal keyup and change events ensures the content is tracked accurately.
Word Splitting and Character Count: The word count now filters out empty spaces properly, ensuring an accurate count.

function my_acf_input_admin_footer() {
?>
<script type="text/javascript">
(function($) {

    acf.add_action('wysiwyg_tinymce_init', function(ed, id, mceInit, $field) {
        // Append counter to TinyMCE status bar
        var $editorContainer = $('#wp-' + id + '-editor-container .mce-statusbar');
        if ($editorContainer.length > 0 && $editorContainer.find('.acfcounter').length === 0) {
            $editorContainer.append(
                '<div class="acfcounter" style="background-color: #f7f7f7; color: #444; padding: 2px 10px; font-size: 12px; border-top: 1px solid #e5e5e5;">' +
                '<span class="words" style="font-size: 12px; padding-right: 30px;"></span>' +
                '<span class="chars" style="font-size: 12px;"></span>' +
                '</div>'
            );
        }

        // Counter function
        const updateCounter = function() {
            var content = tinymce.get(id).getContent({ format: 'text' }); // Get content as plain text
            var wordCount = content.trim().split(/\s+/).filter(Boolean).length; // Word count
            var totalChars = content.length; // Character count

            // Update the status bar counters
            $editorContainer.find('.acfcounter .words').html('Words: ' + wordCount);
            $editorContainer.find('.acfcounter .chars').html('Characters: ' + totalChars);
        };

        // Trigger counter on initialization and content changes
        updateCounter(); // Initial count
        tinymce.get(id).on('keyup change', updateCounter); // Bind to keyup and change events
    });

})(jQuery);
</script>
<?php
}

add_action('acf/input/admin_footer', 'my_acf_input_admin_footer');