Question

I think this is a simple question, but I can not find the answer

I have a rails app and I am using jquery and the YUI Rich Text Editor, I want to write some javascript/jquery to to have a minimum text length counter (i.e. you have 240 characters left). I have it working with a simple text-area:

jQuery.fn.populateCounter = function() {
    var text_length = $(this).val().length;
    var counter = $(this).siblings('p.counter');
    if (text_length == 0) {
        counter.text('Enter at least 15 characters');
    }
    else if (text_length < 15) {
        var left = 15 - text_length
        counter.text(left + ' characters to go');
    }
    else if (text_length <= 600) {
        var remaining = 600 - $(this).val().length;
        counter.text(remaining + ' characters left' );
    }
    else {
        var to_many = $(this).val().length - 600;
        counter.text(to_many + ' characters to many' );
    }
    return this;
}

$('.new_comment textarea').live('keyup',function () {
  $(this).populateCounter();
});

But it is unclear to me how to do it with the YUI editor (how do i consume there event? and how do i get the length of content). Thanks for your help!

— jt

Answer 1

Have a look at the YAHOO.widget.SimpleEditor events. Once you have an editor created (maybe this is a good place to start), you could use the editorKeyPress event to trigger your text length check.

myEditor.subscribe('editorKeyPress', function () {
   var textLength = myEditor.toString().length;
   // .... do checks
});