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)
- 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
- WYSIWYG 'visual' tab in sidebar breaks when switching sidebar tabs HOT 1
- WYSIWYG Editor Field: Image element with width and height attributes triggers unsafe HTML error message HOT 4
- filter wysiwyg_tinymce_settings breaking HOT 1
- Front-end form submits itself when closing the wordpress link-edit dialogue
- Nested cloned repeater only works for 1 level
- Gallery - edit image breaks field in block sidebar HOT 1
- ACF 6.3.0 update breaks "No fields assigned" filter with empty string HOT 3
- Can't add ACF licence key HOT 1
- update_field() not working as expected in this scenario HOT 3
- Installing through composer installs incorrect version HOT 5
- Uncaught TypeError: Cannot access offset of type string on string - flexible content HOT 4
- Fix jQuery deprecations HOT 1
- User field stopped showing in GraphQL query
- Group: image subfield nĀ°10 not working HOT 1
- PLEASE ADD A DISCLAIMER THAT SHORTCODES HAVE TO BE ENABLED NOW HOT 1
- Repeater field type with pagination HOT 1
- Conditional logic in the Advanced Field Settings broke when a wrapper was added v6.2.9.
- Ampersands in Text Area fields produce warnings HOT 5
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.