WordPressビジュアルエディタでのカウントのしくみ

Question

開発目的で、ユーザーが入力した文字の総数を知る必要があります。

WordPressはTinyMCEを使用しています。以下のロジックを使用して、テキストエディタを使用して編集するとコンソールで文字数を取得できます。しかし、Visual Editorでは動作しません。どうして ？ビジュアルエディタで入力した文字をカウントするには？

jQuery(function ($) { 
    $("html").load().on("keyup", function() { 
var content = document.getElementById("content").value.length; 
    }); 
}); 

Answer 1

インターネットで検索しているときに、WordPressのTinyMCEのビジュアルエディタで文字の数を数える同じコードに行きます。元のpostへのリンクは

add_action('admin_print_footer_scripts', 'check_textarea_length'); 

function check_textarea_length() { ?> 

    <script type="text/javascript"> 

    var visual_editor_char_limit = 50; 

    var html_editor_char_limit = 50; 

    var char_limit_warning="Reduce word count!"; 

    // jQuery ready fires too early, use window.onload instead 

    window.onload = function() { 

      // are we using visual editor? 

      var visual = (typeof tinyMCE != "undefined") && tinyMCE.activeEditor && !tinyMCE.activeEditor.isHidden()?true:false; 

      if(visual){ 

        jQuery('.mce-statusbar').append('<span class="word-count-message">'+ char_limit_warning +'</span>'); 



        tinyMCE.activeEditor.on('keyup', function(ed,e) { 

          // Strip HTML tags, WordPress shortcodes and white space 

          editor_content = this.getContent().replace(/(<[a-zA-Z\/][^<>]*>|\[([^\]]+)\])|(\s+)/ig,''); 



          // debug: 

          console.log("tinymce editor current #chars: "+editor_content.length); 



          if (editor_content.length > visual_editor_char_limit) { 



            jQuery('#content_ifr').addClass('toomanychars'); 



            // stop any more character input 

            e.returnValue = false; 

            e.cancelBubble = true; 



            // debug: 

            //console.log(" stop writing! "); 



            return false; 



          } else { 
            jQuery('#content_ifr').removeClass('toomanychars'); 

          } 

        }); 

      } 

      // do we have html editor? 

      if(jQuery("#content").length){ 

        jQuery("#content").keyup(function(){ 

          // debug: 

          console.log("html editor current #chars : " + jQuery(this).val().length); 

          if(jQuery(this).val().length > html_editor_char_limit){ 

            jQuery(this).val(jQuery(this).val().substr(0, html_editor_char_limit)); 

            console.log(char_limit_warning); 

          } 

        }); 

      } 

    } 
    </script> 
    <style type="text/css"> 

      .wp_themeSkin .word-count-message { font-size:1.1em; display:none; float:right; color:#fff; font-weight:bold; margin-top:2px; } 
      .wp_themeSkin .toomanychars .mce-statusbar { background:red; } 

      .wp_themeSkin .toomanychars .word-count-message { display:block; } 

    </style> 

    <?php 

} 

Answer 2

私はTinyMCEからのようなキャラクターをカウントするのがどういうわけか通常の管理スクリプトファイルはこれでは機能しません。あなたが何かをするにはtinymceプラグイン変数が必要であるからです。

まず、このコードをfunctions.phpに追加して、tinymceプラグインフィルタを初期化します。

function tinymce_init() { 
    // Hook to tinymce plugins filter 
    add_filter('mce_external_plugins', 'tinymce_plugin'); 
} 
add_filter('init', 'tinymce_init'); 

function tinymce_plugin($init) { 
    // We create a new plugin... linked to a js file. 
    // Mine was created from a plugin... but you can change this to link to a file in your plugin 
    $init['my_event'] = get_template_directory_uri() . '/js/myscript.js'; 
    return $init; 
} 

はその後keyupイベントの後wp_editorからのgetコンテンツの長さを追加します。ちょうど追加するmyscript.js

jQuery(document).ready(function($) { 
    // Create 'keyup_event' tinymce plugin 
    tinymce.PluginManager.add('my_event', function(editor, url) { 
     // Create keyup event 
     editor.on('keyup', function(e) { 
      var theContent = tinyMCE.activeEditor.getContent(); 
      // alert(theContent.length); 
      console.log(theContent.length); 
     }); 
    }); 
}); 

あなたには分かりますか？