Pull to refresh

TinyMCE 3.x: Подсчет количества слов и символов при редактировании контента

Reading time2 min
Views5.8K
При использовании WYSIWYG редактора TinyMCE 3.x часто возникает потребность отображения статистики редактируемой статьи в реальном времени: отображение количества слов, символов и символов с пробелами.

Для чего это может требоваться?
Самое частое применение: создатели контента (копирайтеры, рерайтеры, контент-редакторы и т.д.) должны иметь возможность оценивать выполненный объем своей работы.

Плагин «из коробки» просто не работает для русского языка (не говоря о парсинге HTML-тегов). Поэтому было принято решение написания своего «велосипеда».

Код функции:
	$().ready(function() {

            /////Инициализация редактора посредством jQuery//////////////////
		$('textarea.tinymce').tinymce({
                        /* .........................................................
                        ..........опции инициализации.........
                        .........................................................*/


			setup : function(ed) {

                        ///////////Функция для подсчета символов и вывода статистики////////////
                             var wordscount=function () { 

                                  content=tinyMCE.activeEditor.getContent({format : 'raw'});

                                  ////Вставку кода (pre) - вырезаем///////////
      content = content.replace(/(<\s*\/?\s*)pre(\s*([^>]*)?\s*>)*(<\s*\/?\s*)pre(\s*([^>]*)?\s*>)/gi,"");


                                  content=content.replace(/<\/?[^>]+(>|$)/g,' ');

                                  content=content.replace(/&(lt|gt);/g, function (strMatch, p1){
                                			return (p1 == "lt")? "<" : ">";
                                          });


                                  content=content.replace(/ /g,' ');
                                  content=content.replace(/\n/," ");
                                  content=content.replace(/ +/g,' ');
                                  content=content.replace(/\s*((\S+\s*)*)/,'$1');
                                  content=content.replace(/((\s*\S+)*)\s*/,'$1');
                                  words=content.split(" ").length;
                                  charsws=content.length;
                                  chars=content.replace(/ +/g,'').length;
                                  if (content=='') {words=0;chars=0;charsws=0;}
                                  document.getElementById('wordscount').innerHTML=words;
                                  document.getElementById('charscount').innerHTML=chars;
                                  document.getElementById('charswscount').innerHTML=charsws;
                                  //alert(content); 


                           };
                         /////////////код функции завершился//////////

                         /////Привязываем функцию к событиям////////
                           ed.onKeyUp.add(wordscount);
                           ed.onChange.add(wordscount);
                           ed.onInit.add(wordscount);
                          }


там, где нам необходимо отображать статистику (ниже, в
):
Слов: <span id="wordscount"></span> Символов: <span id="charscount"></span> Симв. с пробелами: <span id="charswscount"></span>


Результат работы функции: автоматическое обновление статистики по словам и символам "на лету" при наборе/вставке/загрузке контента статьи.
Код парсинга тэгов - "сыроват", замечания и дополнения - приветствуются.
Пример работы - можно посмотреть по ссылке: Создание статьи
Всем Спасибо!
Tags:
Hubs:
Total votes 11: ↑6 and ↓5+1
Comments2

Articles