How to display wp-editor word count?

TIEro
(@tiero)

7 years, 9 months ago
I’m using the built-in wp-editor for a post submission screen (custom post type), so I fiddle with TinyMCE for custom buttons. I’d like to have the word count show on the status bar, but can’t find how to do it. I’ve hunted all over the place!

My code is simple (I’ve removed a bit of surround <div> stuff, and $sub_content is the content in the editor):
```
$args = array(
    'media_buttons' 	=>	false,
    'textarea_rows'		=>	25,
    'tinymce'		 	=>	array ('theme_advanced_buttons1' => 'bold,italic,|,bullist,numlist,|,spellchecker','statusbar' => true)
);
wp_editor($sub_content, 'sub_content', $args);
```
I assume I need another parameter in the $args, but can’t find any reference to what I need.

Any help appreciated!

Viewing 8 replies - 1 through 8 (of 8 total)

Moderator bcworkz
(@bcworkz)

7 years, 9 months ago

The word count you see below the editor on post edit screens is not part of the TinyMCE editor, it is part of jQuery script loaded with the post edit screen. /wp-admin/js/post.js (the last function in the file)

You could likely adopt this script for your own purposes. It does have some dependencies, jQuery of course, as well as word-count.js. There may be other dependencies, these were the ones obvious to me.

Thread Starter TIEro
(@tiero)

7 years, 9 months ago

Ah, crap. I know there’s a word count plugin for TinyMCE, but have no clue how to use it. I’ll see if I can find a cludge somewhere.

Thanks for the response!

Thread Starter TIEro
(@tiero)

7 years, 9 months ago

Further research: there’s a filter for adding plugins to TinyMCE.

https://codex.wordpress.org/Plugin_API/Filter_Reference/mce_external_plugins

Unfortunately (as usual), the Codex is completely unclear about any practical use of the thing, so I have no idea how to add “wordcount”. Searches online just bring back very complex code to add buttons or the simple code to limit buttons (like I’m already doing).

This is a great example of why WP is brilliant and sucks: you can do anything with it, but you have to already know how to do it before you look up how to do it. :\
Thread Starter TIEro
(@tiero)

7 years, 9 months ago
Aaaand there it is. StackOverflow to the rescue, as usual:

http://stackoverflow.com/questions/23896040/how-do-i-add-the-fullpage-tinymce-plugin-to-the-standard-tinymce-editor-in-wordp

Went and grabbed the TinyMCE download, hunted through the files for the plugin I wanted (plugins/wordcount). There’s a single plugin.min.js file in there. Put that in my plugin folder (at the root, just for testing).

Then added this code:
```
// Add wordcount plugin to TinyMCE for all instances.
add_filter('mce_external_plugins', 'aa_register_tinymce_plugins');
function aa_register_tinymce_plugins() {
	$plugins = array('wordcount'); //Add any more plugins you want to load here
	$plugins_array = array();

	//Build the response - the key is the plugin name, value is the URL to the plugin JS
	foreach ($plugins as $plugin ) {
		$plugins_array[$plugin] = plugins_url('plugin.min.js', __FILE__);
	}
	return $plugins_array;
}
```
And the word count appears. For multiple plugins, you’d put the whole of the tinymce download into your plugin folder and change the foreach line to look in the tinymce/plugins subdirs (each plugin has a plugin.min.js file):

$plugins_array[ $plugin ] = plugins_url('tinymce/plugins/', __FILE__) . $plugin . '/plugin.min.js';

Job done. Phew. 🙂
Moderator bcworkz
(@bcworkz)

7 years, 9 months ago

Nice work! And thank you for sharing the solution.

…you have to already know how to do it before you look up how to do it.

lol – so true!

Thread Starter TIEro
(@tiero)

7 years, 9 months ago

Seriously. Over 20% of the world’s websites use WP, yet the dev resources are still incomplete, vague and for the most part unhelpful.

Ah, well. 🙂
frankiekam
(@frankiekam)

7 years, 3 months ago
TIEro. Please help. I am not clear where you put what code.
> There’s a single plugin.min.js file in there.
> Put that in my plugin folder (at the root, just for testing).
>
I have a plugin named wp-voting-contest. So I should copy the file
tinymce_4.5.1\tinymce\js\tinymce\plugins\wordcount\plugin.min.js
and upload it to my folder:
/httpdocs/wp-content/plugins/wp-voting-contest
?

Also, where (path and filename) did you add/put the filter code:
```
// Add wordcount plugin to TinyMCE for all instances.
add_filter('mce_external_plugins', 'aa_register_tinymce_plugins');
function aa_register_tinymce_plugins() {
	$plugins = array('wordcount'); //Add any more plugins you want to load here
	$plugins_array = array();

	//Build the response - the key is the plugin name, value is the URL to the plugin JS
	foreach ($plugins as $plugin ) {
		$plugins_array[$plugin] = plugins_url('plugin.min.js', __FILE__);
	}
	return $plugins_array;
}
```
?

Please reply soon. Thanks, Frankie Kam.
- This reply was modified 7 years, 3 months ago by frankiekam.
Thread Starter TIEro
(@tiero)

7 years, 3 months ago
Hi,

“So I should copy the file tinymce_4.5.1\tinymce\js\tinymce\plugins\wordcount\plugin.min.js
and upload it to my folder: /httpdocs/wp-content/plugins/wp-voting-contest?”

Yes, that’s what I did for my testing.

I guess you could put the file anywhere but I figured including it as part of the plugin was best.

For the final version of mine, I created a sub-folder in my plugin for TinyMCE stuff, in case I wanted to add more plugins, so mine ended up in /plugins/plugin-name/tinymce/plugins/wordcount – which is HORRIBLY ugly but probably best practice. If you only want to use one plugin, stuff it in the top folder. It’s easier. 🙂

I put the filter code in my main plugin file, so probably wp-voting-contest.php or something. I don’t think it matters, really, as long as you put it in a file that’s included in your plugin. I put it in the main one because I wanted it to load right at the start.

Hope that helps!
- This reply was modified 7 years, 3 months ago by TIEro.
- This reply was modified 7 years, 3 months ago by TIEro.