WordPress 所见即所得编辑器的字符限制

Question

我限制了可以添加为特殊页面（活动提交页面）内容的字符数。它在 WordPress 中的文本或代码模式下工作正常，但当我使用 WYSIWYG 编辑器时就不行了。

知道如何更改它以便它也可以使用 WordPress 编辑器吗？

非常感谢！

这是我正在使用的 JS。

     // Set your character limit
     var count_limit = 1000;

     // Set the initial symbol count on page load
     $('#tcepostcontent-wc span').html($('#tcepostcontent').val());

     $('#tcepostcontent').on('keyup', function () {
      var char_count = $(this).val().length;
      var tcepostcontent = $(this).val();
      var text_remaining = count_limit - char_count;

     // Update the character count on every key up
     $('#tcepostcontent-wc span').html(text_remaining);

     if (char_count >= count_limit) {
       $('#tcepostcontent-wc').css('color', 'red');
       $(this).val(tcepostcontent.substr(1, count_limit));
     } else {
       $('#tcepostcontent-wc').css('color', null);
     }

     }).after('<p id="tcepostcontent-wc">Max 1000 are available <span>1000</span></p>');

Answer 1

WordPress 的可视化编辑器是 TinyMCE，他实现了一个自定义 API，您可以用它来解决这个问题。您应该使用以下源代码，将其添加到一个小的自定义插件中，更改编辑器 tinyMCE.activeEditor.editorId 的 ID，激活它，然后完成。

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

来源来自 this answer SE 论坛中的 WordPress 主题。

WordPress 所见即所得编辑器的字符限制

Character limitation for WordPress WYSIWYG editor

wordpress

jquery

character-limit