WordPress 비주얼 에디터에서 카운 터를 계산하는 방법

Question

개발 목적으로 사용자가 입력 한 총 문자 수를 알아야합니다.

WordPress는 TinyMCE를 사용합니다. 아래의 로직을 사용하여 텍스트 편집기를 사용하여 편집하면 콘솔에서 문자 수를 얻을 수 있습니다. 그러나 Visual Editor에서는 작동하지 않습니다. 왜 ? Visual Editor에서 입력 한 문자 수를 계산하는 방법은 무엇입니까?

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 콘텐츠 길이를 얻을 추가 할 수 있습니다. 추가 만하면됩니다. 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); 
     }); 
    }); 
}); 

희망이 있습니다.