При использовании 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);
}
там, где нам необходимо отображать статистику (ниже, в <body>):
Слов: <span id="wordscount"></span>
Символов: <span id="charscount"></span>
Симв. с пробелами: <span id="charswscount"></span>
Результат работы функции: автоматическое обновление статистики по словам и символам «на лету» при наборе/вставке/загрузке контента статьи.
Код парсинга тэгов — «сыроват», замечания и дополнения — приветствуются.
Пример работы — можно посмотреть по ссылке: Создание статьи
Всем Спасибо!
Автор: xmoonlight
