Как грамотные градиенты в текстовом редакторе WordPress

Question

Для цели развития мне нужно знать общее количество введенных пользователем символов.

WordPress использует TinyMCE, используя приведенную ниже логику, я могу получить количество символов в консоли, если я редактирую с помощью текстового редактора. Но это не работает для Visual Editor. Зачем ? Как подсчитать символы, введенные в Visual Editor?

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

Answer 1

При поиске в Интернете я перехожу к тому же коду, который подсчитывает количество символов в визуальном редакторе TinyMCE в WordPress. Ссылка на исходный 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, чтобы что-то с ней делать.

Итак, сначала добавьте этот код в свои функции. 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; 
} 

Затем добавьте получить длину содержимого из wp_editor после keyup события. Просто добавьте на 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); 
     }); 
    }); 
}); 

Надеюсь, это имеет смысл для вас!