TinyMCE Character Count inkorrekt

Question

Ich benutze TinyMCE in einem Textfeld auf meiner Seite. Ich versuche, die Zeichen- und Wortzählung zu erhalten, und das Textarea wird eingegeben. Ich habe verschiedene Versionen versucht, damit es richtig funktioniert, aber ohne Erfolg. Hier ist die neueste Buggy-Version:

$().ready(function() { 
    $('textarea.tinymce').tinymce({ 
     // Location of TinyMCE script 
     script_url: 'jscripts/tiny_mce/tiny_mce.js', 

     // General options 
     theme: "advanced", 
     plugins: "autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,advlist", 

     // Theme options 
     theme_advanced_buttons1: "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect", 
     theme_advanced_buttons2: "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor", 
     theme_advanced_buttons3: "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen", 
     theme_advanced_buttons4: "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak", 
     theme_advanced_toolbar_location: "top", 
     theme_advanced_toolbar_align: "left", 
     theme_advanced_statusbar_location: "bottom", 
     theme_advanced_resizing: true, 

     // Example content CSS (should be your site CSS) 
     content_css: "css/content.css", 

     // Drop lists for link/image/media/template dialogs 
     template_external_list_url: "lists/template_list.js", 
     external_link_list_url: "lists/link_list.js", 
     external_image_list_url: "lists/image_list.js", 
     media_external_list_url: "lists/media_list.js", 

     // Replace values for the template plugin 
     template_replace_values: { 
      username: "Some User", 
      staffid: "991234" 
     }, 

     //setup:'tmceWordcount' 
     setup: function(ed) { 

      ed.onKeyUp.add(function(ed, e) { 

       //Following does not work correctly 
       //var strip = (tinyMCE.activeEditor.getContent()).replace(/(<([^>]+)>)/ig,""); 

       //Neither does the code below 
       var strip = (tinyMCE.activeEditor.getContent()).replace(/<[^>]+>/g, ""); 


       var text = strip.split(' ').length + " Words, " + strip.length + " Characters" 
       tinymce.DOM.setHTML(tinymce.DOM.get(tinyMCE.activeEditor.id + '_path_row'), text); 
      }); 
     } 

    }); 
}); 

Hier ist mein Beispiel. Ich gebe das erste Wort ein als: Me Wenn ich das erste Wort eintippe, zeigt es Zeichen und Wort richtig an. Aber sobald ich das Leerzeichen drücke, um das nächste Wort einzugeben, zeigt es an, dass die Zeichen 8 sind. Wie? IMO, einschließlich der HTML-Tags. Der HTML-Code ist wie für den oben eingegebenen Text folgt:

<p>Me&nbsp;</p> 

I-Ausgang 1 Wort und 3 Zeichen (2 Zeichen + 1 Leerzeichen) sein erwarten. Aber es zeigt mir 5 weitere Charaktere. Wie ist das passiert & Wie kann ich es stoppen? Wenn Sie das nächste Wort eingeben, sobald Sie mit der Eingabe beginnen, wird die korrekte Anzahl der Zeichen angezeigt. Wenn Sie jedoch erneut auf "Space" tippen, werden weitere Zeichen hinzugefügt. Dieses Problem scheint also immer dann zu entstehen, wenn der Speicherplatz & eingegeben wird. Wie kann das behoben werden?

Answer 1

Wenn Sie so etwas wie dies tun wollen, dann muss eine jQuery-Funktion wie so hinzufügen: http://jsfiddle.net/uA9Jx/

jQuery.fn.stripTags = function() { 
     return this.replaceWith(this.text().replace(/<\/?[^>]+>/gi, '')); 
}; 

Angenommen, dies ist Ihre HTML:

<textarea id='bar'>This is <b>bold</b> and this is <i>italic</i>.</textarea>

Und dann tun Sie:

$("#bar").stripTags();

in 0

Welche führen wird:

This is bold and this is italic.

Oder dieser Code in ähnlicher Weise funktioniert: http://jsfiddle.net/cwbMX/

$("#bar").html($("#bar").text().replace(/<\/?[^>]+>/gi, '')); 

Answer 2

Sie müssen eigene Lösung nicht implementieren, gibt es bereits ein Plugin, das beide Charaktere tut und Wortzahl: http://adamscheller.com/tinymce-count-characters-plugin/

Answer 3

Internet-Speicher ist endlos, und die meisten der Threads auf tinymce funktionieren nicht in Version 4 Meine Lösung ist einfach: chang e das Wordcount-Plugin wie folgt: } return e + 'Chars:' + a.getContent(). length} und ändern Sie den onkeyup-Code durch die Beseitigung der Prüfung für den Schlüsselcode 32 a.on ("keyup", Funktion (a) {b()})}, 0)}), wirkt wie ein Zauber diese Ergebnisse in die tinymce Instanz Einfügen muss in der Tat ein Plugin, aber das ist eine geringfügige Modifikation des Beispiels

Answer 4

nur ein paar Tipps Plugin für diejenigen, die mit mehreren Instanzen von TineMCE arbeiten möchten.

...  
setup: function(e){ 
     //I think in this case 'change' is better than 'keyup' because the user can click a button and change the code without typing. 
     e.on('change', function(e){ 
       var len = tinymce.activeEditor.getContent().length; //Here we get the length of the content with the html tags. 
         var inputName  = tinymce.activeEditor.id; //here we get the name of the input or textarea. 

         var obj = $('input[name="'+inputName+'"]').parent();//Here we set a jquery object reference. 

         var maxLen = 400; 
         obj.find('.char-count').html(len); //Here we set a span tag with the length. 

         if(len > maxLen){ 
          obj.find('.char-count').css('color','#fa8072'); //If the len is bigger than maxLen. 
         }else{ 
          obj.find('.char-count').css('color','#808080'); //If the len is lower than maxLen. 
         } 
        }); 
       }