Comments (5)
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.
@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.
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.
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.
+1 i'd love an example of doing this
from acf.
Related Issues (20)
- Field Name case change does not reflect in DB HOT 1
- $content block variable, is not reactive on preview editor HOT 3
- get_block_wrapper_attributes() doesn't function properly when default attributes are set in block.json HOT 3
- get_block_wrapper_attributes() doesn't function properly when default attributes are set in block.json HOT 1
- acf/location/rule_match not called from acf/ajax/check_screen request.
- Block renaming and 'Block name' advanced input field not functioning for ACF Blocks in WP 6.4.1
- Please remove all crap related to license activation checking HOT 8
- post-object field select2 'search' in wp-admin not returning results when on subsite of multisite HOT 1
- Changing field to not be required using `acf/prepare_field` fails validation HOT 2
- The save_post_terms array values assigned but not saved for bidirectional values
- Presence of fields on a post type breaks iframe editor, even when fields are positioned to the side HOT 1
- Multiple URLs and wrong canonical url with ACF custom post type and custom permalink HOT 1
- ACF Tab align left group display issue HOT 1
- The ACF API integration issue with attachments
- Only Preview mode is available in WP 6.5beta1 HOT 6
- potential infinite loop in acf_get_field_ancestors()
- Block fields now show in the right hand side panel HOT 1
- True/False field fold together and can't be changed/updated HOT 3
- When returning false in acf/load_field or acf/prepare_field multiple warnings occur HOT 1
- ACF post preview and revisions completely broken HOT 8
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from acf.