📜 ⬆️ ⬇️

TinyMCE 3.x: Counting the number of words and characters when editing content

When using WYSIWYG editor TinyMCE 3.x, it is often necessary to display statistics of the edited article in real time: display the number of words, characters and symbols with spaces.

What may this be required for?
The most frequent use: content creators (copywriters, rewriters, content editors, etc.) should be able to evaluate the amount of work done.

The out-of-the-box plugin simply does not work for the Russian language (not to mention parsing HTML tags). Therefore, it was decided to write his "bicycle".

Function code:
$().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); } 

')
where we need to display statistics (below, in
 ): 
: <span id="wordscount"></span> : <span id="charscount"></span> . : <span id="charswscount"></span>


: " " // .
- "", - .
- :
!
):
: <span id="wordscount"></span> : <span id="charscount"></span> . : <span id="charswscount"></span>


: " " // .
- "", - .
- :
!

Source: https://habr.com/ru/post/162137/


All Articles