Giter VIP home page Giter VIP logo

Comments (5)

fhauck avatar fhauck commented on July 24, 2024 7

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');

from acf.

luizhop avatar luizhop commented on July 24, 2024 2

@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);

from acf.

elliotcondon avatar elliotcondon commented on July 24, 2024

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!

from acf.

delacosta456 avatar delacosta456 commented on July 24, 2024

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 ?

from acf.

Wheels00 avatar Wheels00 commented on July 24, 2024

+1 i'd love an example of doing this

from acf.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.