Word counter in realtime in metabox

There ought to be several generic JavaScript examples to be found through searching. The count function would be triggered by a key stroke event. The key that matters would be the space bar. The count field then gets updated with the result. Your JS code should be properly enqueued into WP just like any other JS code.

I have tried all ready something like this but with no luck.
Instead of $('#text') I have put $('#tinymce') and I got nothing.

counter = function() {
    var value = $('#text').val();

    if (value.length == 0) {
        $('#wordCount').html(0);
        $('#totalChars').html(0);
        $('#charCount').html(0);
        $('#charCountNoSpace').html(0);
        return;
    }

    var regex = /\s+/gi;
    var wordCount = value.trim().replace(regex, ' ').split(' ').length;
    var totalChars = value.length;
    var charCount = value.trim().length;
    var charCountNoSpace = value.replace(regex, '').length;

    $('#wordCount').html(wordCount);
    $('#totalChars').html(totalChars);
    $('#charCount').html(charCount);
    $('#charCountNoSpace').html(charCountNoSpace);
};

$(document).ready(function() {
    $('#count').click(counter);
    $('#text').change(counter);
    $('#text').keydown(counter);
    $('#text').keypress(counter);
    $('#text').keyup(counter);
    $('#text').blur(counter);
    $('#text').focus(counter);
});

What about var value = $('#tinymce').html();? .val() is only for form elements.

Or maybe target the editor’s text view <textarea> instead? At least as proof of concept to refine your script with. It ought to be more straight forward than targeting the WYSIWYG editor. Once you know your script is working with a plain text area, then you can tackle the WYSIWYG editor.

I get undefined when I put $('#tinymce').html();.

I have tried everything I can think of.

@bcworkz

Is there a way to create an alert in TinyMCE when number of words goes beyond preferred?
I can not find a tutorial for the TinyMCE word counter other than for buttons.

Ugh. It looks like #tinymce is inside an iframe, so you first need to get the iframe element, then get its .contentDocument or .contentWindow.document property, which is the iframe DOM. Within that DOM you can finally get to #tinymce. Using a simple jQuery selector will only get you the iframe, not its inner DOM. You need to step into the inner DOM using typical JS.

Any sort of limit alert would be JS based where you step into the inner DOM to count words, so the same issue is still in the way. I’m not aware of any handy tinyMCE method to do this.

@bcworkz
I have found these code snippets but I don’t know how to implement them in WordPress.

Link to snippets.

If you are using Gutenberg there is already this information just 1 click away. In the top left corner is a little information button (content structure) which will show you information about the block content you have below.

Why not use this?

@mr-case
Unfortunately, I’m not using Gutenberg. This is for the WooCommerce Product post type.

From the looks of those snippets, you would add an event listener to the page’s submit button that calls submitForm() on click. That function ought to call preventDefault() before doing the offered code. It’s assuming tinymce is a global editor object. I don’t know if that’s the case or not. I don’t have any actual tinyMCE experience, I’ve been relying upon my generic JS knowledge to offer advice.

The way to find out if tinymce is assigned globally or not is to try the code. If there is no error complaining tinymce is undefined, then the snippets are likely valid. The code only gives feedback on submit. It’s not an ongoing counter. You could remove the form submit code, listen for keyboard events, and update a counter element in DOM instead of putting up alerts, in order to make a real time counter out of it.

There is a real possibility a real time counter could adversely impact display time in response to keystrokes, but the only way to know is to try it and see.

@bcworkz
Is there a way to transfer a text from metabox to the main text editor.
Something like Yoast?

Yes, with JavaScript. You still need to target the tinyMCE container somehow. I wasn’t aware Yoast did something like that. You could examine their source code to see how they did it.

You can also manipulate content after it has been submitted. For example, append meta box content to the post content.

I got it

//getting the classic editor 
var ed = tinyMCE.activeEditor;
//getting the element that I need for displaying the count
var wourdcount=document.getElementById('wourdcount');

var count = 1;
    function fn(){
        count++;
        return ' ';
    }
var con = tinyMCE.activeEditor.getContent().trim();
    con = con.replace(/[\s]+/ig,fn);
var words = count+1;
    count = 0;
    if(words >300){
      wourdcount.innerHTML='Reduce the number of words. The number of words is '+words;
    }