Forum
Word Count In Admin For Text Areas
Been exploring how I might add a word counter set to a predefined limit. Looks like it would need to be using something like JQuery. I found this plugin: https://github.com/aaronrussell/jquery-simply-countable
Followed instructions to add the script etc to the template, however fear it cannot work as the line of text to display the counter is html: <p>You have used <span id="counter"></span> words.</p>
Any idea how I can add this so it appears in the admin editor and not the front end?
If not is there another way to do this?
This is code in template:
<p><perch:content id="usp-text" type="textarea" label="USP Text" html="true" editor="markitup" words="40" help="Limited to no more than 40 words" /></p>
<p>You have used <span id="counter"></span> words.</p>
<script type="text/javascript" charset="utf-8">
$(document).ready(function()
{
$('#usp-text').simplyCountable({
counter: '#counter',
countType: 'words',
maxCount: 40,
countDirection: 'down'
});
});
</script>
Script in your template wont appear in the edit form. You need to add the JavaScript as a UI plugin.
Oh that might be a problem, how would I pass custom word counts for different templates that way?
And what about the <p>You have used <span id="counter"></span> words.</p> where would I add this?
I think you should be able to add them as
data-attributes.Append your string to the DOM by targeting the textarea and inserting it after.
Hah now you've lost me! How do I add them as data attributes? Is that <perch:data>?
I found a way to display it in the <perch:help> tags but thats not ideal as I want it by the text area.
Also currently the only way I could trigger it was by targeting the script to each perch text area id which is impractical.
e.g. just to make it work in one admin text area I had to use #perch_265_usp-text but the id in the template is just #usp-text. Is there a way to have it target this from the script without having to name every perch generated id?
PS A properly implemented word count plugin would be a real WYSIWYG addition for editors as just telling them there is a limit is not ideal and having it count as you type is great (I got the idea from an Opencart job I did as their admin uses something similar).
That ID can/will change - it's not safe to hard code into your template.
So how can I implement this as it seems the script needs the correct ID, is there something I can add to the ID to replace the "perch_265" part dynamically?
And how do I display the <p>You have used <span id="counter"></span> words.</p> by the relevant text area inside the admin area?
You can't target the field by ID, because you don't know the ID. That's why I was suggesting using a
data-attribute to target it instead.Okay, where do Ifind info/docs on the data- attribute?
And how can I display the html code: "<p>You have used <span id="counter"></span> words.</p>" within the admin edit page?
HTML5Doctor has a good overview: https://html5doctor.com/html5-custom-data-attributes/
Add that HTML to the DOM in your JavaScript.
Okay, having read it I think this is beyond my capabilities!
Will you consider building something like this into the admin? Its just that when you have built content areas that require limits on how many words max should be entered a visual count of them is useful.
Yes, it's just a case of priorities.