Zobrazení počtu znaků v TinyMce editoru

Před několika hodinami se Vít Jurásek na Twitteru ptal, zda je možné zobrazit počet znaků v editoru WordPressu. Vím, že mnoho psavců se v práci orientuje podle počtu znaků, takže mne to celkem zaujalo.

Chvíli jsem hledal, zda nenajdu odkaz na nějaký plugin, ale to co jsem našel nefungovalo dynamicky. Takže jste počet znaků viděli buď jen při načtení editoru, nebo při automatickém uložení.

Pomocí jQuery mi to přišlo takové zbytečně komplikované a z toho co jsem našel, něco fungovalo jen pro html a něco zase jen pro editor.

Nebudu to protahovat, řešením je využít TinyMce eventy při inicializaci editoru. Nejprve však za počítadlo slov přidáme řádek pro zobrazení počtu znaků

add_action('admin_head', 'vita_control_lenght' );
function vita_control_lenght(){
    ?>
     <script type="text/javascript">
        jQuery(document).ready(function() {
		      jQuery('#wp-word-count').append('<br />Počet znaků: <span class="char-count">0</span>');
	       });
    </script>
    <?php 
  }

Po přidání html kódu, kam budeme zobrazovat počet znaků, musíme použít eventy TinyMce.
První bude onInit, protože již po načtení editoru potřebujeme znát počet znaků v článku.
Druhý je onKeyUp, díky němu přepočítáme délku vždy, když pusítme nějakou klávesu.
Třetím je onClick, protože potřebujeme ošetřit změnu v editoru i při kliknutí.
A posledním je onExecCommand, aby nám fungovalo počítání i při vykonání nějakého příkazu v TinyMce, což je typicky například přidání odkazu.

Pro zavěšení funkcí použijeme filter tiny_mce_before_init

add_filter('tiny_mce_before_init', 'vita_tinymce_callback' );

Samotná funkce pak bude vypadat takto

function vita_tinymce_callback($init){
 
    $init['setup'] = "function( ed ) { 
 
      ed.onInit.add(function(ed, e) {
        var text = '';
        text = jQuery(tinymce.activeEditor.getContent()).text();
        var delka = text.length; 
        jQuery('.char-count').text(delka);
      });
      ed.onKeyUp.add(function(ed, e) {
        var text = '';
        text = jQuery(tinymce.activeEditor.getContent()).text();
        var delka = text.length; 
        jQuery('.char-count').text(delka);
      });
      ed.onClick.add(function(ed, e) {
        var text = '';
        text = jQuery(tinymce.activeEditor.getContent()).text();
        var delka = text.length;   
        jQuery('.char-count').text(delka);
      });
      ed.onExecCommand.add(function(ed, e) {
        var text = '';
        text = jQuery(tinymce.activeEditor.getContent()).text();
        var delka = text.length;   
        jQuery('.char-count').text(delka);
      });
 
    }"; 
 
    return $init;
 
    }

A hotovo.

Na závěr jen malé upozornění – tento postup vrací správné výsledky pouze, pokud nepoužíváte v článcích shortcody. Pokud je pomocí nějakého regulárního výrazu odstraníte, ztratíte znaky v jejich obsahu. A naopak, když je tam necháte, tak se do délky článku budou počítat i názvy atributů.