{"id":2070,"date":"2014-10-11T05:30:20","date_gmt":"2014-10-11T05:30:20","guid":{"rendered":"http:\/\/musilda.cz\/?p=2070"},"modified":"2014-10-11T05:30:20","modified_gmt":"2014-10-11T05:30:20","slug":"zobrazeni-poctu-znaku-v-tinymce-editoru","status":"publish","type":"post","link":"https:\/\/affinite.io\/cs\/zobrazeni-poctu-znaku-v-tinymce-editoru\/","title":{"rendered":"Zobrazen\u00ed po\u010dtu znak\u016f v TinyMce editoru"},"content":{"rendered":"

P\u0159ed n\u011bkolika hodinami se V\u00edt Jur\u00e1sek na Twitteru ptal, zda je mo\u017en\u00e9 zobrazit po\u010det znak\u016f v editoru WordPressu. V\u00edm, \u017ee mnoho psavc\u016f se v pr\u00e1ci orientuje podle po\u010dtu znak\u016f, tak\u017ee mne to celkem zaujalo.<\/p>\n

Chv\u00edli jsem hledal, zda nenajdu odkaz na n\u011bjak\u00fd plugin, ale to co jsem na\u0161el nefungovalo dynamicky. Tak\u017ee jste po\u010det znak\u016f vid\u011bli bu\u010f jen p\u0159i na\u010dten\u00ed editoru, nebo p\u0159i automatick\u00e9m ulo\u017een\u00ed.<\/p>\n

Pomoc\u00ed jQuery mi to p\u0159i\u0161lo takov\u00e9 zbyte\u010dn\u011b komplikovan\u00e9 a z toho co jsem na\u0161el, n\u011bco fungovalo jen pro html a n\u011bco zase jen pro editor.<\/p>\n

Nebudu to protahovat, \u0159e\u0161en\u00edm je vyu\u017e\u00edt TinyMce eventy p\u0159i inicializaci editoru. Nejprve v\u0161ak za po\u010d\u00edtadlo slov p\u0159id\u00e1me \u0159\u00e1dek pro zobrazen\u00ed po\u010dtu znak\u016f<\/p>\n

\nadd_action('admin_head', 'vita_control_lenght' );\nfunction vita_control_lenght(){\n    ?>\n     \n        jQuery(document).ready(function() {\n\t\t      jQuery('#wp-word-count').append('
Po\u010det znak\u016f: 0<\/span>');\n\t       });\n    \n    <?php\n  }\n<\/pre>\n
Po p\u0159id\u00e1n\u00ed html k\u00f3du, kam budeme zobrazovat po\u010det znak\u016f, mus\u00edme pou\u017e\u00edt eventy TinyMce.
\nPrvn\u00ed bude onInit, proto\u017ee ji\u017e po na\u010dten\u00ed editoru pot\u0159ebujeme zn\u00e1t po\u010det znak\u016f v \u010dl\u00e1nku.
\nDruh\u00fd je onKeyUp, d\u00edky n\u011bmu p\u0159epo\u010d\u00edt\u00e1me d\u00e9lku v\u017edy, kdy\u017e pus\u00edtme n\u011bjakou kl\u00e1vesu.
\nT\u0159et\u00edm je onClick, proto\u017ee pot\u0159ebujeme o\u0161et\u0159it zm\u011bnu v editoru i p\u0159i kliknut\u00ed.
\nA posledn\u00edm je onExecCommand, aby n\u00e1m fungovalo po\u010d\u00edt\u00e1n\u00ed i p\u0159i vykon\u00e1n\u00ed n\u011bjak\u00e9ho p\u0159\u00edkazu v TinyMce, co\u017e je typicky nap\u0159\u00edklad p\u0159id\u00e1n\u00ed odkazu.<\/p>\n
Pro zav\u011b\u0161en\u00ed funkc\u00ed pou\u017eijeme filter tiny_mce_before_init<\/p>\n
\nadd_filter('tiny_mce_before_init', 'vita_tinymce_callback' );\n<\/pre>\n
Samotn\u00e1 funkce pak bude vypadat takto<\/p>\n
\nfunction vita_tinymce_callback($init){\n\n    $init['setup'] = \"function( ed ) {\n\n      ed.onInit.add(function(ed, e) {\n        var text = '';\n        text = jQuery(tinymce.activeEditor.getContent()).text();\n        var delka = text.length;\n        jQuery('.char-count').text(delka);\n      });\n      ed.onKeyUp.add(function(ed, e) {\n        var text = '';\n        text = jQuery(tinymce.activeEditor.getContent()).text();\n        var delka = text.length;\n        jQuery('.char-count').text(delka);\n      });\n      ed.onClick.add(function(ed, e) {\n        var text = '';\n        text = jQuery(tinymce.activeEditor.getContent()).text();\n        var delka = text.length;\n        jQuery('.char-count').text(delka);\n      });\n      ed.onExecCommand.add(function(ed, e) {\n        var text = '';\n        text = jQuery(tinymce.activeEditor.getContent()).text();\n        var delka = text.length;\n        jQuery('.char-count').text(delka);\n      });\n\n    }\";\n\n    return $init;\n\n    }\n<\/pre>\n
A hotovo.<\/p>\n
Na z\u00e1v\u011br jen mal\u00e9 upozorn\u011bn\u00ed – tento postup vrac\u00ed spr\u00e1vn\u00e9 v\u00fdsledky pouze, pokud nepou\u017e\u00edv\u00e1te v \u010dl\u00e1nc\u00edch shortcody. Pokud je pomoc\u00ed n\u011bjak\u00e9ho regul\u00e1rn\u00edho v\u00fdrazu odstran\u00edte, ztrat\u00edte znaky v jejich obsahu. A naopak, kdy\u017e je tam nech\u00e1te, tak se do d\u00e9lky \u010dl\u00e1nku budou po\u010d\u00edtat i n\u00e1zvy atribut\u016f.<\/p>\n","protected":false},"excerpt":{"rendered":"
P\u0159ed n\u011bkolika hodinami se V\u00edt Jur\u00e1sek na Twitteru ptal, zda je mo\u017en\u00e9 zobrazit po\u010det znak\u016f v editoru WordPressu. V\u00edm, \u017ee mnoho psavc\u016f se v pr\u00e1ci orientuje podle po\u010dtu znak\u016f, tak\u017ee mne to celkem zaujalo. Chv\u00edli jsem hledal, zda nenajdu odkaz na n\u011bjak\u00fd plugin, ale to co jsem na\u0161el nefungovalo dynamicky. Tak\u017ee jste po\u010det znak\u016f vid\u011bli<\/p>\n","protected":false},"author":1,"featured_media":2071,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_lock_modified_date":false,"footnotes":""},"categories":[12,30],"tags":[385],"class_list":["post-2070","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-navody","category-wordpress","tag-tinymce"],"_links":{"self":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/posts\/2070"}],"collection":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/comments?post=2070"}],"version-history":[{"count":0,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/posts\/2070\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/media\/2071"}],"wp:attachment":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/media?parent=2070"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/categories?post=2070"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/tags?post=2070"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}