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.

Čtěte  Automattic bude obsluhovat prodej domény .blog

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ů.

About The Author

Zajímá mne Wordpress, responsivní šablony a zkrátka vše kolem tohoto skvělého redakčního systému.

Related posts

3 Comments

  1. Martin

    Dobrý den,

    jsem lama, netuším kam napsat filtr a kam vložit samotnou funkci. Pomůžete mi prosím návodem pod lamy?

    Diky, Martin

    Reply
    1. Musilda

      Dobrý den,
      musíte si vytvořit buď malý plugin, nebo to zapsat do functions.php

      Reply

Leave a Reply

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

Chcete mít přehled o dění ve světě WordPressu?

Přímo do vašeho emailu

Pravidelný přehled o novinkách, trendech a událostech, které se točí kolem WordPressu. Souhrn toho nejzajímavějšího od nás i ze zahraničí.