web-dev-qa-db-fra.com

wp_editor désactivé après avoir atteint la limite du nombre de caractères

Je veux désactiver l'entrée dans une instance de wp_editor sur le front-end. Ceci suit avec précision le nombre de caractères, mais permet une saisie une fois que la limite est atteinte.

function my_char_count( $initArray ) {

  if ( ! is_admin() ) {   

    $initArray['setup'] = <<<JS
[function(ed) {
    ed.on('keyup', function(e) {

        var content = ed.getContent().replace(/(<[a-zA-Z\/][^<>]*>|\[([^\]]+)\])|(\s+)/ig,''); 
        var max = 20;
        var len = content.length;

        var diff = max - len; 
        if ( diff < 1 ) {
            // none of these prevents input
            ed.stopPropagation();
            ed.preventDefault();
            tinymce.dom.Event.cancel(e);
            return false;

        }    
        document.getElementById("character_count").innerHTML = "Characters Left: " + diff;    

    });

}][0]
JS;
  }

    return $initArray;
}
add_filter( 'tiny_mce_before_init', 'my_char_count' );
tinymcevisual-editor
5
shanebp

Je suppose que l'événement keyup est trop tard.

Si vous utilisez l'événement keypress au lieu de keyup, cela semble fonctionner:

ed.on( 'keypress', function(e) {
    var content = ed.getContent().replace(
        /(<[a-zA-Z\/][^<>]*>|\[([^\]]+)\])|(\s+)/ig, '' );
    var max = 20;
    var len = content.length;
    var diff = max - len;       

    if ( diff < 1 )
        tinymce.dom.Event.cancel(e);

    document.getElementById("character_count").innerHTML = "Characters Left: " + diff;
} );

L'événement keypress ne consignera pas les clés telles que Alt , Entrée , Contrôle , ArrowUp , ... de sorte que lorsque la longueur de contenu maximale autorisée est atteinte, nous n'obtiendrons pas coincé!

Cela devrait également fonctionner pour la variable keydown, mais elle enregistre toutes les clés. Nous devons donc ajouter des exceptions pour les clés autorisées.

3
birgire