Is there a way to apply characters limit inside wp

Question

I am trying to find out how to combine this code in resource box on a front end submission form but I need it to be limited to a certain number of characters.

<?php wp_editor( get_option('resource'), 'resource', array('textarea_name' => 'resource', 'class'=>'requiredField', 'textarea_rows'=>'6','id'=>'resource' ,'onkeyup'=>'countChar(this)','media_buttons' => false)  );?><?php if(isset($_POST['resource'])) { if(function_exists('stripslashes')) { echo stripslashes($_POST['resource']); } else { echo $_POST['resource']; } } ?>

This code checks if the field is empty:

<?php if(isset($_POST['resource'])) { if(function_exists('stripslashes')) { echo stripslashes($_POST['resource']); } else { echo $_POST['resource']; } } ?>

How can I make that check inside wp_editor function? I need this to allow and simplify html inside my resource box to users...

This is the javascript function that I am using ('onkeyup'=>'countChar(this)') inside but it's not working.

Here Am I falling?

Answer 1

First of all, you need to correct your implementation of the wp_editor. Your code should read something like this:

<?php wp_editor( get_option('resource'), 'resource', array('textarea_name' => 'resource', 'editor_class'=>'requiredField', 'textarea_rows'=>'6', 'media_buttons' => false)  );?>

Note that the wp_editor function does not accept arguments for javascript methods, and that there is a parameter for 'editor_class' but not 'class' on its own.

Next, you need to bind the keyup event (or keydown event) to the TinyMCE editor. This needs to be done upon the initialization of the editor. This other Q&A helped me find the solution to that for you. You need to add something very much like the following to your functions.php file:

add_filter( 'tiny_mce_before_init', 'wpse24113_tiny_mce_before_init' );
function wpse24113_tiny_mce_before_init( $initArray )
    {
        $initArray['setup'] = <<<JS
                [function(ed) {
                ed.onKeyDown.add(function(ed, e) {
                   if(tinyMCE.activeEditor.editorId=='resource') || (tinyMCE.activeEditor.editorId=='the_other_editor_id_you_want_to_limit') {
                        countChar(tinyMCE.activeEditor.getContent());
                     }
                });
            }][0]
            JS;
    return $initArray;
    }

This will change the TinyMCE initialization to add the event for you. When the event is fired (a key is pressed) the function will check the ID of the active editor to see whether it is one of the editors whose character count you wish to limit. Then it grabs the content of the editor and passes it into your countChar function.

Answer 2

I altered Bryan Gentry's solution a tiny bit to my needs and it works nicely. Here is my code if you need a similar functionality.

add_filter( 'tiny_mce_before_init', 'wpse24113_tiny_mce_before_init' );
function wpse24113_tiny_mce_before_init( $initArray )
{
    $initArray['setup'] = <<<JS
[function(ed) {
    ed.onKeyDown.add(function(ed, e) {
        if(tinyMCE.activeEditor.editorId=='content-id') {
            var content = tinyMCE.activeEditor.getContent();
            var max = 300;
            var len = content.length;
            if (len >= max) {
              $('#charNum').html('<span class="text-error">You've got more then '+max+' characters!</span>');
            } else {
             var charCount = max - len;
             $('#charNum').html(charCount + ' characters left');
            }
         }
    });

}][0]
JS;
    return $initArray;
}