Как показывать количество знаков (символов) в статье (посте, записи) при написании, в редакторе WordPress
При написании статьи редактор WordPress пишет общее количество слов. Можно ли сделать, чтобы он подсчитывал количество знаков - символов с пробелами и без?
Посидел немного и вот что получилось. В целом решение достойное внимания, однако есть небольшая вероятность что при обновлении может слететь, так как опирается на родное событие 'wpcountwords' и селектор HTML элемента 'word-count'.
Вставляем этот код в functions.php, а еще лучше сделать из него плагин:
<?php /** * Добавляет количество символов в строке под редактором контента на странице редактирования любой записи (рядом с количеством слов). * Символы считаются с пробелами и без. Например: 650 (600) * * Author: Kama (http://wp-kama.ru) * ver: 1.1 */ if( is_admin() ){ add_action('admin_print_footer_scripts', 'wp_editor_simbols_count', 99); function wp_editor_simbols_count(){ if( get_current_screen()->base != 'post' ) return; ?> <script type="text/javascript"> jQuery(document).ready(function($){ // добавим элемент $('#wp-word-count .word-count').after('<span> Символов: </span><span class="chars-count"></span>'); var $content = $('#content'), $charscount = $('#wp-word-count .chars-count'), mceEditor, timeout; function timeout_update(){ clearTimeout(timeout); timeout = setTimeout( update, 1000 ); } function update() { var text; if( ! mceEditor || mceEditor.isHidden() ) text = $content.val(); else text = mceEditor.getContent({ format:'text' }); if( text ){ text = text.replace(/\r?\n|\r/g, ' ') // удалим переносы строк .replace(/<[^>]+>/g, '') // удалим теги .replace(/\[[^\]]+\]/g, ''); // удалим шотркоды $charscount.text( text.length +' ('+ text.replace(/[ ]+/g, '').length +')' ); } } // событие нажатия в редакторе tinymce $(document).on('tinymce-editor-init', function( event, editor ) { if( editor.id !== 'content' ) return; // это не наш редактор mceEditor = editor; editor.on('nodechange keyup', timeout_update ); }); // событие нажатия в текстовом редакторе $content.on('input keyup', timeout_update ); update(); // первый запуск }); </script> <?php } }Забыл поблагодарить. Спустя год "Спасибо большое!"
Отлично, твой код тоже сохраню, как альтернативу
Пока использую такой (мне наоборот нравится, что считается сразу):
<?php /* Plugin Name: Tinymce Advanced Features Description: Добавляет подсчёт количества введённых знаков (с пробелами) рядом со счётчиком количества слов при написании материалов. Author: Josh, Kama, Campusboy Version: 1.0 */ /* http://wordpress.stackexchange.com/questions/166077/keyup-events-in-tinymce-editor-not-working http://wp-kama.ru/question/kolichestvo-znakov-v-state https://codex.wordpress.org/TinyMCE */ function tinymce_init() { // Hook to tinymce plugins filter add_filter( 'mce_external_plugins', 'tinymce_advanced_features' ); } add_filter('init', 'tinymce_init'); function tinymce_advanced_features($init) { $init['keyup_event'] = plugins_url( 'js/keyup_event.js', __FILE__ ); return $init; } ?>Файл keyup_event.js
jQuery(document).ready(function($) { $('.word-count').after( '<span>. Символов: </span><span class="chars-count"></span>' ); var charsCountBlock = $('.chars-count'); // Функция для подсчёта знаков function charsCount ( content = false ){ if( content ) charsCountBlock.text( content.replace(/<[^>]+>/g, "").length ); }; // Выполним подсчёт при загрузке страницы charsCount( $('.wp-editor-area').val() ); // Создадим плагин 'keyup_event' для tinymce tinymce.PluginManager.add('keyup_event', function( editor, url ) { // Create keyup event editor.on('keyup', function(e) { // Получаем контент из редактора (html) get_ed_content = tinymce.activeEditor.getContent(); // Do stuff here... (run do_stuff_here() function) do_stuff_here(get_ed_content); }); }); // This function allows the script to run from both locations (visual and text) function do_stuff_here(content) { // Now, you can further process the data in a single function charsCount( content ); } });А можно ли все еще использовать этот код спустя столько лет?