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

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

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

2
campusboy1951 3.1 года назад
  • 2
    Kama4696

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

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

    campusboy 1.4 года назад

    Отлично, твой код тоже сохраню, как альтернативу 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 );
    
    	}
    
    });
    Комментировать
  • 0
    adm_konst cайт: mygeografi.ru

    Здравствуйте! А не подскажите как решить немного иную задачу - вывести в сайтбар сайта количество символов в посте. Именно не в области основного контента нужно, а по соседству

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