web-dev-qa-db-ja.com

wp_editorは文字数制限に達した後無効にする

フロントエンドでwp_editorのインスタンスへの入力を無効にしたいです。これは正確に文字数を追跡しますが、制限に達した後に入力を許可します。

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

keyupイベントは手遅れだと思います。

keypressの代わりにkeyupイベントを使用する場合、これはうまくいくようです：

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

keypressイベントは Alt 、 Enter 、 Control 、 ArrowUp などのようなキーをログに記録しません。立ち往生！

これはkeydownに対しても機能するはずですが、すべてのキーをログに記録するので、許可されたキーに対して例外を追加する必要があります。

3
birgire