webentwicklung-frage-antwort-db.com.de

Zählen Sie Wörter mit Tinymce im Front-End 

ich benutze eine vordere eingebaute (Artikel-Verzeichnis-Plugin) Tinymce mit wp_editor.
was auch immer ich versuchte, ich kann nicht den Wortzähler veranlassen, automatisch zu arbeiten.

ich kann die Wörter in der HTML-Registerkarte mit einem JQuery-Wortzähler gut zählen, aber nicht
in der Wysisyg-Registerkarte, da es ein Iframe ist ...

ich habe ein paar neue weiße Haare bekommen, die sich mit diesem Problem befassen und würde mich sehr freuen
Ihre Eingabe/Hilfe oder sogar ein gr8-Verweis auf eine Lösung.

Hier ist der Code, den ich derzeit habe (relevanter Teil der Seite), einschließlich
der jquery counter den ich lieber nicht benutzen würde und lieber wordpress benutzen würde
oder um genau zu sein Tinymce Build in Plugin/Fähigkeit, Wörter wie im Dashboard zu zählen.

<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]'));
    }
?>

.

ÜBERARBEITET, UM @bueltge UND ANDERES MEIN PROBLEM ZU ERKLÄREN ...
Ich habe eine temporäre Version online hochgeladen, damit ich Ihnen das Problem zeigen kann.

Die Website ist in Hebräisch, Sie müssen sich also anmelden
mit der Demo-Benutzer/Pass-Kombination: temp/temp

URL: HIER

Klicken Sie dann auf den letzten Knopf, der den ersten von links bedeutet ...
dort würden Sie den Herausgeber sehen. Der Versuch, es zu schreiben, würde zu Ergebnissen führen
mit dem Zeichenzähler nicht ändern, aber wenn Sie auf die Registerkarte HTML klicken, werden Sie
würde sehen, dass der Zeichenzähler funktioniert ..

Also .. Wie kann ich den Zähler im Wysisyg-Modus zum Zählen bringen?

in diesem Beispiel wird das vorgeschlagene Code-Buelge verwendet, das eine geringfügige Änderung darstellt
zur id - hier sind die überarbeiteten beiden obersten zeilen, die ich geändert habe

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

Eine Weile später habe ich beschlossen, es noch einmal zu versuchen ... (brauchte es für ein Projekt)
dieses mal habe ich mich auf eine saubere frage gemacht und es hat funktioniert!

hier ist es:
die funktionierende und benutzerfreundliche Art, Wörter zu zählen, während sie in einem wp_editor geschrieben werden
HTML-Editor und visueller Editor.

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

Danke für die Hilfe von eveyone;)

2
Sagive SEO

Müssen dies als Antwort wegen der Zeichenbegrenzung für Kommentare tun (Ironie :)):

sie können versuchen, anstelle der Auswahl des Textbereichs durch eine Klasse oder was, das tinymce-Objekt zu verwenden, um den Inhalt abzurufen. in deinem Fall ist es tinyMCE.editors.minword.getContent. Dies gibt die Länge des Inhalts zurück. Ich bin mir nicht sicher, aber es sollte keine Rolle spielen, ob es sich um einen visuellen oder einen HTML-Modus handelt. Aber auch wenn es darauf ankommt, verwenden Sie tinymce.editors.minword, um den visuellen Modus zu bestimmen .getContent. Um zu überprüfen, in welchem ​​Modus sich der Editor befindet, können Sie Folgendes verwenden:

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

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

wo HTML-Modus Zeug/Visual-Modus Zeug nur bedeutet, den Selektor für Ihre Keyup-Funktion zu wechseln.

BEARBEITEN: Um zu bestätigen, dass .getContent sich nicht um den aktuellen Status kümmert, lesen Sie auch diesen Thread: Wie erhalte ich die Eingabe eines TinyMCE-Editors, wenn ich das Front-End verwende?

So. Verwenden Sie einfach tinyMCE.editors. ## editor_id ##. GetContent, um die Länge des aktuell verwendeten Editors zu ermitteln.

BEARBEITEN:

Ohne Prüfung keine Garantie, dass kein Fehler vorliegt

<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

Sie finden meine Lösung für den Zähler auf Wörtern für Kommentare in diese Antwort ; Sie können dies aber auch für eine andere ID verwenden, um die Wörter in Ihrem Frontend-Editor zu zählen.

0
bueltge