WordPress как на ладони

Как показывать количество знаков (символов) в статье (посте, записи) при написании, в редакторе WordPress

При написании статьи редактор WordPress пишет общее количество слов. Можно ли сделать, чтобы он подсчитывал количество знаков - символов с пробелами и без?

2
campusboy
9.5 лет назад 4750
  • 2
    Kama9616

    Посидел немного и вот что получилось. В целом решение достойное внимания, однако есть небольшая вероятность что при обновлении может слететь, так как опирается на родное событие '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
    	}
    
    }
    
    campusboy 8.3 года назад

    Забыл поблагодарить. Спустя год "Спасибо большое!" smile

    campusboy 7.7 лет назад

    Отлично, твой код тоже сохраню, как альтернативу smile Пока использую такой (мне наоборот нравится, что считается сразу):

    <?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 );
    
    	}
    
    });
    Alex 5 месяцев назад

    А можно ли все еще использовать этот код спустя столько лет?

    Комментировать
На вопросы могут отвечать только зарегистрированные пользователи. Вход . Регистрация