Is there a way to apply characters limit inside wp_editor function?

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?

On tinymce forums - http://www.tinymce.com/forum/viewtopic.php?pid=42404#p42404 — web-nomad, Sep 21 '12 at 13:10
Thanks but I wasn't clear about my needs. I need this to work only in one instance of the two wp_editor's that I have on my submission form ...sorry! And I also like to know how can I make this work inside the above code since the javascript call isn't working... — bpy, Sep 21 '12 at 15:18
Please take a look at my answer and accept it if it does the trick, or let me know if you have questions. I just edited it to allow it to check the ID of the editor so the character limit would be applied only to the editors you wish to limit. — Bryan Gentry, Oct 03 '12 at 12:03

score 1 · Answer 1 · edited Apr 13 '17 at 12:37

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.

I didn't tried yet but this deserves this comment: This is a very good explanation and answer! Thanks! — bpy, Oct 04 '12 at 14:44

score 0 · Accepted Answer · answered Apr 02 '13 at 20:14

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;
}

Is there a way to apply characters limit inside wp_editor function?

2 Answers2

Linked