Search code examples
javascriptwordpresstinymcefrontend

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


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?


Solution

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