Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

i am using a front built in (article directory plugin) tinymce with wp_editor.
what ever i tried i cant get the word counter to work automatically..

i can count the words fine in the HTML tab using a jquery word counter but not
in the wysisyg tab since its an iframe...

i got some new white hairs dealing with this issue and would really appreciate
your input / help or even a gr8 reference to a solution.

Here is the code i currently have (relevant part of the page) including
the jquery counter which i would rather not use and would rather use wordpress
or to be precise tinymce build in plugin / ability to count words as if inside the dashboard.

<script type="text/javascript">
$(document).ready(function() {
    $("[class^='count[']").each(function() {
        var elClass = $(this).attr('class');
        var minwords = 0;
        var maxWords = 0;
        var countControl = elClass.substring((elClass.indexOf('['))+1, elClass.lastIndexOf(']')).split(',');

        if(countControl.length > 1) {
            minwords = countControl[0];
            maxWords = countControl[1];
        } else {
            maxWords = countControl[0];
        }   

        $(this).after('<div class="wordcount"><strong>0</strong> Words</div>');
        if(minwords > 0) {
            $(this).siblings('.wordcount').addClass('errorwords');
        }   

        $(this).bind('keyup click blur focus change paste', function() {
            var numWords = jQuery.trim($(this).val()).split(' ').length;
            if($(this).val() === '') {
                numWords = 0;
            }   
            $(this).siblings('.wordcount').children('strong').text(numWords);

            if(numWords < minwords || (numWords > maxWords && maxWords != 0)) {
                $(this).siblings('.wordcount').addClass('errorwords');
            } else {
                $(this).siblings('.wordcount').removeClass('errorwords');   
            }
        });
    });
});

</script>
<?php
        wp_print_scripts('quicktags');
        require_once(ABSPATH . '/wp-admin/includes/post.php');
        function richedit() { return true; }
        add_filter('user_can_richedit', 'richedit');
            //wp_tiny_mce( false, array( 'height' => '370' ) );
        if ($options['default_editor'] == 'html') {
            add_filter( 'wp_default_editor', create_function('', 'return "html";') );
        } else {
            add_filter( 'wp_default_editor', create_function('', 'return "tinymce";') );
        }
        wp_editor($_POST['post'], 'minword' , array('textarea_name' => 'minword', 'editor_class' => 'count[50,0]'));
    } else {
        echo '<style type="text/css">#quicktags {display:none}</style>';
        wp_editor($_POST['post'], 'minword' , array('textarea_name' => 'minword', 'editor_class' => 'count[50,0]'));
    }
?>

.

REVISED TO BETTER EXPLAIN @bueltge AND OTHER'S MY PROBLEM...
i have uploaded a temp version online so i can show you the problem.

The website is in hebrew so you need to login
with the demo user / pass combination which is: temp / temp

Url: HERE

Then Click the last button meaning the first from the left...
there you would see the editor. trying to write it would results
with the chars counter not changing but if you click the HTML tab you
would see the chars counter is working..

So.. How can i get the counter to count when in wysisyg mode?

this example uses the code buelge suggested which a minor change
to the id - here is the revised top two lines which i have changed

var comment_input = $( '#articleSubmit textarea' );
var submit_button = $( '#articleSubmit #submit' );
share|improve this question

3 Answers 3

up vote 2 down vote accepted

A while later i decided to try it again... (needed it for a project)
this time i went for clean jquery and i got it to work!

here it is:
the working & easy to use way to count words while they are being written inside a wp_editor both in the
html editor and visual editor.

<script type="text/javascript">
i=0;
$(document).ready(function(){
    // visual mode
    // the iframe id
    $("#description_ifr").ready(function () {
        setInterval(function(){
            var tinymceval = $('#description_ifr').contents().find('body').text();
            var wordscount = tinymceval.split(" ");
                    // you should crete a div with the 
                    // the id = #wordcount to show count
            $("#wordcount").text(wordscount.length);
        }, 5000)
    });

    // html mode
// #description is the id of the text area
    $("#description").keypress(function(){
        $("#wordcount").text(i+=1);
    });
}); 
</script>

Thanks for eveyone's help ;)

share|improve this answer

Have to do this as answer because of the char limit for comments ( irony :) ):

you can try to, instead of selecting the textarea by a class or what, use the tinymce object to get the content. in your case it's tinyMCE.editors.minword.getContent. This will return the lenght of the content..not sure, but it shouldn't matter if it's in visual or html mode...but even if it matters, to target the visual mode use (repeating myself) tinymce.editors.minword.getContent . to check in which mode the editor is you can use something like:

// get the container
container = $('.wp-editor-wrap');

// check for current state
if ( $(container) ).hasClass('html-active') ) 
    { ..html mode stuff.. }
else 
    { visual mode stuff }

where html mode stuff / visual mode stuff just means to switch the selector for your keyup function.

EDIT: To confirm that .getContent doesn't care about the current state see this thread as well: How to get the input of a TinyMCE editor when using on the front-end?

So. Just use tinyMCE.editors.##editor_id##.getContent to get the length of the current editor in use.

EDIT:

Without testing, no guarantee that there is no mistake

<script type="text/javascript">
$(document).ready(function() {
    $("[class^='count[']").each(function() {
        var elClass = $(this).attr('class');
        // new line, editor id
    var elId = $(this).attr('id');
        var minwords = 0;
        var maxWords = 0;
        var countControl = elClass.substring((elClass.indexOf('['))+1, elClass.lastIndexOf(']')).split(',');

        if(countControl.length > 1) {
            minwords = countControl[0];
            maxWords = countControl[1];
        } else {
            maxWords = countControl[0];
        }   

        $(this).after('<div class="wordcount"><strong>0</strong> Words</div>');
        if(minwords > 0) {
            $(this).siblings('.wordcount').addClass('errorwords');
        }   

        $(this).bind('keyup click blur focus change paste', function() {

            // new line, reference element ID
        var content = get_tinymce_content(elId);
            // changed line
            var numWords = jQuery.trim(content).split(' ').length;
            if($(this).val() === '') {
                numWords = 0;
            }   
            $(this).siblings('.wordcount').children('strong').text(numWords);

            if(numWords < minwords || (numWords > maxWords && maxWords != 0)) {
                $(this).siblings('.wordcount').addClass('errorwords');
            } else {
                $(this).siblings('.wordcount').removeClass('errorwords');   
            }
        });
    });
});


function get_tinymce_content(elId){
    if (jQuery("#"+elId+"-wrap").hasClass("tmce-active")){
        return tinyMCE.editors.elId.getContent();
    }else{
        return jQuery('#'+elId).val();
    }
}
</script>
share|improve this answer
    
Getting the content when i click submit wont help me becouse i need to (while user is writing) to get the words count.. am i missing the point? was that what you meant? –  Sagive SEO Apr 11 '12 at 0:04
    
Yeah, you're missing the point :) for example in your code: var numWords = jQuery.trim($(this).val()).split(' ').length; You get the content of the textarea by it's val() but you can use tinyMCE.editors.minword(editor_id).getContent() to get the content, no matter if visual or html mode. tinymce.com/wiki.php/API3:method.tinymce.Editor.getContent –  ungestaltbar Apr 11 '12 at 7:36
    
the link is very helpfull, thanks from my side; i have other problems with the wp_editor in Frontend –  bueltge Apr 12 '12 at 8:49
    
Say @ungestaltbar - not to be lazy cu'z i tried it multiple times and reasearched online... can you edit you answer using the line you suggested "tinyMCE.editors.minword(editor_id).getContent()" and show me how to integrate it in my code? –  Sagive SEO Apr 12 '12 at 18:40
    
I'ev edited my answer. –  ungestaltbar Apr 12 '12 at 19:13

You find my solution for counter on words for comments in this answer; but you can also use this to an other ID to count the words in your frontend editor.

share|improve this answer
    
i am sorry but unless i missunderstood your answer... the problem as i wrote is that is that tinymce editor is not a textarea but an iframe. when i switch to html mode i have not problem counting words using jquery but how do i count the words when using wysiwyg?... thats the issue ---> you can firebug this example to see the iframe structure: tinymce.com/tryit/full.php –  Sagive SEO Apr 10 '12 at 9:58
    
but it works also on an iframe, you must only change the ID or class for select on DOM. –  bueltge Apr 10 '12 at 19:58
    
going to try it again ;) –  Sagive SEO Apr 10 '12 at 21:09
    
Tried... same as my jqeury code. counts only in HTML tab.. check my revised question - there are login details & url if you wish to view it yourself –  Sagive SEO Apr 10 '12 at 22:04

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.