web-dev-qa-db-fra.com

Compter les mots en utilisant tinymce dans le front-end 

j'utilise un tinymce intégré avec wp_editor.
Quoi que j’ai essayé, je ne parviens pas à faire fonctionner automatiquement le compteur Word.

je peux compter les mots bien dans l'onglet HTML en utilisant un compteur de mots jQuery, mais pas
dans l'onglet wysisyg depuis son iframe ...

j'ai eu quelques nouveaux cheveux blancs traitant de cette question et apprécierais vraiment
votre contribution/aide ou même une référence gr8 à une solution.

Voici le code que j'ai actuellement (partie pertinente de la page), y compris
le compteur jquery que je préférerais ne pas utiliser et utiliser plutôt wordpress
ou plus précisément tinymce construit dans plugin/capacité à compter les mots comme si à l'intérieur du tableau de bord .

<script type="text/javascript">
$(document).ready(function() {
    $("[class^='count[']").each(function() {
        var elClass = $(this).attr('class');
        var minwords = 0;
        var maxWords = 0;
        var countControl = elClass.substring((elClass.indexOf('['))+1, elClass.lastIndexOf(']')).split(',');

        if(countControl.length > 1) {
            minwords = countControl[0];
            maxWords = countControl[1];
        } else {
            maxWords = countControl[0];
        }   

        $(this).after('<div class="wordcount"><strong>0</strong> Words</div>');
        if(minwords > 0) {
            $(this).siblings('.wordcount').addClass('errorwords');
        }   

        $(this).bind('keyup click blur focus change paste', function() {
            var numWords = jQuery.trim($(this).val()).split(' ').length;
            if($(this).val() === '') {
                numWords = 0;
            }   
            $(this).siblings('.wordcount').children('strong').text(numWords);

            if(numWords < minwords || (numWords > maxWords && maxWords != 0)) {
                $(this).siblings('.wordcount').addClass('errorwords');
            } else {
                $(this).siblings('.wordcount').removeClass('errorwords');   
            }
        });
    });
});

</script>
<?php
        wp_print_scripts('quicktags');
        require_once(ABSPATH . '/wp-admin/includes/post.php');
        function richedit() { return true; }
        add_filter('user_can_richedit', 'richedit');
            //wp_tiny_mce( false, array( 'height' => '370' ) );
        if ($options['default_editor'] == 'html') {
            add_filter( 'wp_default_editor', create_function('', 'return "html";') );
        } else {
            add_filter( 'wp_default_editor', create_function('', 'return "tinymce";') );
        }
        wp_editor($_POST['post'], 'minword' , array('textarea_name' => 'minword', 'editor_class' => 'count[50,0]'));
    } else {
        echo '<style type="text/css">#quicktags {display:none}</style>';
        wp_editor($_POST['post'], 'minword' , array('textarea_name' => 'minword', 'editor_class' => 'count[50,0]'));
    }
?>

.

RÉVISÉ POUR MIEUX EXPLIQUER MON PROBLÈME DE @bueltge ET D'AUTRE ...
J'ai mis en ligne une version temporaire afin de pouvoir vous montrer le problème.

Le site web est en hébreu, vous devez donc vous connecter
avec la combinaison utilisateur/passe de démonstration qui est: temp/temp

Url: ICI

Puis cliquez sur le dernier bouton qui signifie le premier à partir de la gauche ...
Là, vous verriez l'éditeur. en essayant d'écrire cela résulterait
mais le compteur de caractères ne change pas, mais si vous cliquez sur l’onglet HTML,
verrait le compteur de caractères fonctionner.

Alors .. Comment puis-je faire en sorte que le compteur compte en mode Wysisyg?

cet exemple utilise le code buelge suggéré qui constitue un changement mineur
au numéro d'identification - voici les deux lignes supérieures révisées que j'ai modifiées

var comment_input = $( '#articleSubmit textarea' );
var submit_button = $( '#articleSubmit #submit' );
tinymcefront-endwp-editor
2
Sagive SEO

Un peu plus tard, j'ai décidé de l'essayer à nouveau ... (en avait besoin pour un projet)
Cette fois, j’ai fait appel à jquery et j’ai réussi à le faire fonctionner!

c'est ici:
la méthode de travail et facile à utiliser pour compter les mots alors qu’ils sont écrits à l’intérieur d’un wp_editor
éditeur HTML et éditeur visuel.

<script type="text/javascript">
i=0;
$(document).ready(function(){
    // visual mode
    // the iframe id
    $("#description_ifr").ready(function () {
        setInterval(function(){
            var tinymceval = $('#description_ifr').contents().find('body').text();
            var wordscount = tinymceval.split(" ");
                    // you should crete a div with the 
                    // the id = #wordcount to show count
            $("#wordcount").text(wordscount.length);
        }, 5000)
    });

    // html mode
// #description is the id of the text area
    $("#description").keypress(function(){
        $("#wordcount").text(i+=1);
    });
}); 
</script>

Merci pour l'aide de chacun;)

2
Sagive SEO

Je dois faire cela comme réponse à cause de la limite de caractères pour les commentaires (ironie :)):

au lieu de sélectionner la zone de texte par une classe ou quoi, utilisez l’objet tinymce pour obtenir le contenu. dans votre cas, c'est tinyMCE.editors.minword.getContent. Cela retournera la longueur du contenu..pas sûr, mais peu importe que ce soit en mode visuel ou HTML ... mais même si c'est important, pour cibler le mode visuel, utilisez (se répète) tinymce.editors.minword .Obtenir du contenu . pour vérifier dans quel mode est l'éditeur, vous pouvez utiliser quelque chose comme:

// get the container
container = $('.wp-editor-wrap');

// check for current state
if ( $(container) ).hasClass('html-active') ) 
    { ..html mode stuff.. }
else 
    { visual mode stuff }

où trucs en mode html/trucs en mode visuel signifie simplement changer le sélecteur pour votre fonction keyup.

EDIT: pour confirmer que .getContent ne s’intéresse pas à l’état actuel, voyez également ce fil: Comment obtenir l’entrée d’un éditeur TinyMCE lorsqu’il est utilisé en mode frontal?

Alors. Utilisez simplement tinyMCE.editors. ## editor_id ##. GetContent pour obtenir la longueur de l’éditeur en cours d’utilisation.

EDIT:

Sans tests, aucune garantie qu'il n'y a pas d'erreur

<script type="text/javascript">
$(document).ready(function() {
    $("[class^='count[']").each(function() {
        var elClass = $(this).attr('class');
        // new line, editor id
    var elId = $(this).attr('id');
        var minwords = 0;
        var maxWords = 0;
        var countControl = elClass.substring((elClass.indexOf('['))+1, elClass.lastIndexOf(']')).split(',');

        if(countControl.length > 1) {
            minwords = countControl[0];
            maxWords = countControl[1];
        } else {
            maxWords = countControl[0];
        }   

        $(this).after('<div class="wordcount"><strong>0</strong> Words</div>');
        if(minwords > 0) {
            $(this).siblings('.wordcount').addClass('errorwords');
        }   

        $(this).bind('keyup click blur focus change paste', function() {

            // new line, reference element ID
        var content = get_tinymce_content(elId);
            // changed line
            var numWords = jQuery.trim(content).split(' ').length;
            if($(this).val() === '') {
                numWords = 0;
            }   
            $(this).siblings('.wordcount').children('strong').text(numWords);

            if(numWords < minwords || (numWords > maxWords && maxWords != 0)) {
                $(this).siblings('.wordcount').addClass('errorwords');
            } else {
                $(this).siblings('.wordcount').removeClass('errorwords');   
            }
        });
    });
});


function get_tinymce_content(elId){
    if (jQuery("#"+elId+"-wrap").hasClass("tmce-active")){
        return tinyMCE.editors.elId.getContent();
    }else{
        return jQuery('#'+elId).val();
    }
}
</script>
1
ungestaltbar

Vous trouvez ma solution pour contrer les mots pour les commentaires dans cette réponse ; mais vous pouvez également l'utiliser pour un autre ID afin de compter les mots dans votre éditeur frontend.

0
bueltge