limit the length of Wysiwyg content wp 3.9 ACF 5 WordPress

Dbranes answers:

I got this working for a single ACF WYSIWYG field, but I guess you can then expand it for the other fields as well.

One of the problem is to get the ever changing id attribute of ACF editor textarea.

It's possible to use for example:

jQuery('#acf-myeditor .acf_wysiwyg textarea').attr('id');


to grab it.


Here's the demo (see also the attached screenshot):

jQuery(document).ready( function( $ ) {

/**
* Our ACF setup:
*/
var myacf = {
data : {
editor_id: '',
max_length: 0,
error_msg: '',
div_selector: '',
textarea_selector: '',
counter_selector: '',
counter_error_selector: '',
counter_html: '',
},
init: function( max_length, div_selector, textarea_selector, counter_selector, counter_error_selector, error_msg, counter_html ){

// Get user input:
myacf.data.max_length = max_length;
myacf.data.div_selector = div_selector;
myacf.data.textarea_selector = textarea_selector;
myacf.data.counter_selector = counter_selector;
myacf.data.counter_error_selector = counter_error_selector;
myacf.data.error_msg = error_msg;
myacf.data.counter_html = counter_html;

// Check if our ACF WYSIWYG textarea exists and tinymce is available:
if( ! tinymce || ! $( myacf.data.textarea_selector ).length > 0 ){
console.log( 'Error: myacf not initialized!' );
return;
}

// Grab the ACF textarea id:
myacf.data.editor_id = $( myacf.data.textarea_selector ).attr('id');

// Add counter box:
$( myacf.data.div_selector ).append( myacf.data.counter_html );

tinymce.init({
setup: function (editor) {

//myacf.show_counter( myacf.get_length( myacf.data.editor_id ) );

if ( editor.id === myacf.data.editor_id ){

//----------------------
// Bind on KeyDown event
//----------------------
editor.on( 'keydown', function (e) {

// Dispaly counter:
var length = myacf.get_length( myacf.data.editor_id );
myacf.show_counter( length );

// Too many chars:
if( length + 1 > myacf.data.max_length ) {

// Let's allow the user to use backspace/delete when above the max char limit:
if( '46' != e.keyCode && '8' != e.keyCode ) {
e.preventDefault();
}
// Dispaly error:
myacf.show_error( myacf.data.error_msg );
}else{
// Clear error:
myacf.show_error( '' );
}
});

//----------------------
// Bind on KeyUp event:
//----------------------
editor.on( 'keyup', function (e) {
var length = myacf.get_length( myacf.data.editor_id );
myacf.show_counter( length );
});

}
}
});
},
get_length: function( id ){
return tinymce.get( id ).getContent().replace(/(<[a-zA-Z\/][^<>]*>|\[([^\]]+)\])|(\s+)|(\&nbsp;)/ig,'').length;
},
show_counter: function( length ){
$( myacf.data.counter_selector ).val( length + ' / ' + myacf.data.max_length );
},
show_error: function( msg ){
$( myacf.data.counter_error_selector ).html( msg );
}
}



/**
* Initialize:
*
* Example: myacf.init( max_length, div_selector, textarea_selector, counter_selector, counter_error_selector, error_msg, counter_html );
*
*/

myacf.init( 10,
'#acf-myeditor',
'#acf-myeditor .acf_wysiwyg textarea',
'#acf-myeditor .acf-counter',
'#acf-myeditor .acf-counter-error',
'Too many chars!',
'<div class="acf-counter-box"> Counter: <input type=\"text\" style=\"width:75px;\" value=\"0\" class=\"acf-counter\" readonly=\"\"> <span class=\"acf-counter-error\"></span></div>'
);

});


where you have to modify the correct selectors to your needs.

I added a <em>keyCode</em> check, to allow delete/backspace when the maximum limit is reached.

Additionally one should reset the counter on page load, but it's currently only set during a keyup/keydown event.

<strong>Update:</strong>

Here's an idea on how to support multiple ACF editors. It seems to work on my setup:

jQuery(document).ready( function( $ ) {

// Check if our ACF WYSIWYG textarea exists, tinymce is available or acfs is already defined:
if( typeof tinymce == 'undefined' || typeof acfs != 'undefined' || $( '.acf_wysiwyg textarea' ).length < 1 ){
console.log( 'Notice: Our acfs object is not initialized!' );
return;
}

var acfs = {};
acfs.editors = {};

//--------------------------------------------
// ACF editor settings (modify to your needs)
//--------------------------------------------

acfs.data = {}
acfs.data.error_msg = 'Too many chars!';
acfs.data.counter_html = '<div class="acf-counter-box"> Counter: <input type=\"text\" style=\"width:75px;\" value=\"0\" class=\"acf-counter\" readonly=\"\"> <span class=\"acf-counter-error\"></span></div>'

// Editor #1
var key = $( '#acf-myeditor1 .acf_wysiwyg textarea' ).attr( 'id' );
acfs.editors[key] = {};
acfs.editors[key].max_length = '10';
acfs.editors[key].div_selector = '#acf-myeditor1';
acfs.editors[key].counter_selector = '#acf-myeditor1 .acf-counter';
acfs.editors[key].counter_error_selector = '#acf-myeditor1 .acf-counter-error';

// Editor #2
var key = $( '#acf-myeditor2 .acf_wysiwyg textarea' ).attr( 'id' );
acfs.editors[key] = {};
acfs.editors[key].max_length = '5';
acfs.editors[key].div_selector = '#acf-myeditor2';
acfs.editors[key].counter_selector = '#acf-myeditor2.acf-counter';
acfs.editors[key].counter_error_selector = '#acf-myeditor2.acf-counter-error';

// Editor #3
// ...

//------------------
// Event handlers:
//------------------

// Key Down Event handler:
acfs.handle_keydown = function( e, maxlength, editorid ) {
// Display counter:
var length = acfs.get_length( editorid );
acfs.show_counter( acfs.editors[editorid].counter_selector, length, maxlength );

// Too many chars:
if( length + 1 > maxlength ) {
// Let's allow the user to use backspace/delete when above the max char limit:
if( '8' != e.keyCode && '46' != e.keyCode && 4 < e.keyCode ) {
e.preventDefault();
}
// Dispaly error:
acfs.show_error( acfs.editors[editorid].counter_error_selector, acfs.data.error_msg );
}else{
// Clear error:
acfs.show_error( acfs.editors[editorid].counter_error_selector, '' );
}

}

// Key Up Event handler:
acfs.handle_keyup = function( e, maxlength, editorid ) {
var length = acfs.get_length( editorid );
acfs.show_counter( acfs.editors[editorid].counter_selector, length, maxlength );
}

// Get number of chars of a given tinymce textarea
acfs.get_length = function( id ){
return tinymce.get( id ).getContent().replace(/(<[a-zA-Z\/][^<>]*>|\[([^\]]+)\])|(\s+)|(\&nbsp;)/ig,'').length;
}

// Show number of chars and max chars, of a given ACF textarea
acfs.show_counter = function( selector, length, max_length ){
$( selector ).val( length + ' / ' + max_length );
}

// Show too many chars error, for a given ACF textarea
acfs.show_error = function( selector, msg ){
$( selector ).html( msg );
}


//---------------------
// Connect to tinymce
//---------------------

tinymce.init({
setup: function (editor) {
if( typeof acfs.editors[editor.id] != 'undefined' ){

// Add counters box:
$( acfs.editors[editor.id].div_selector ).append( acfs.data.counter_html );

//----------------------
// Bind on KeyDown event:
//----------------------
editor.on( 'keydown', function (e) {
acfs.handle_keydown( e, acfs.editors[editor.id].max_length, editor.id );
});

//----------------------
// Bind on KeyUp event:
//----------------------
editor.on( 'keyup', function (e) {
acfs.handle_keyup( e, acfs.editors[editor.id].max_length, editor.id );
});
}
}
});


ps: Keep in mind that when you copy/paste code from this site, you get extra new lines.

---

---

---

---

---

---

---