TinyMCE Número de caracteres incorrectos

Question

Estoy usando TinyMCE en un área de texto en mi página. Estoy tratando de obtener el caracter y el conteo de palabras y el texto en mecanografiado. He estado probando varias versiones para que funcione correctamente, pero sin éxito. Aquí está la última versión buggy:

$().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); 
      }); 
     } 

    }); 
}); 

Aquí está mi ejemplo. Estoy ingresando la primera palabra como: Me Cuando escribo la primera palabra, muestra los caracteres y la palabra correctamente. Pero tan pronto como toco el espacio para ingresar la siguiente palabra, muestra que los personajes son 8. ¿Cómo? IMO, también incluye las etiquetas HTML. El código HTML es el siguiente para el texto introducido anteriormente:

<p>Me&nbsp;</p> 

espero salida sea 1 Palabra y 3 caracteres (2 personajes + 1 plaza). Pero me muestra 5 caracteres más. ¿Cómo está sucediendo esto? & ¿cómo puedo detenerlo? Si ingresa la siguiente palabra, tan pronto como comience a escribir, muestra el recuento correcto de caracteres. Pero cuando alcanzas el espacio nuevamente, agrega más caracteres. Entonces, este problema parece estar ocurriendo cada vez que se presionan los espacios &. ¿Cómo se puede arreglar esto?

Answer 1

Si quieres hacer algo como esto, entonces debe agregar una función jQuery así: http://jsfiddle.net/uA9Jx/

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

Supongamos que este es el código HTML:

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

Y entonces lo haces:

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

que se traducirá en:

This is bold and this is italic.

O este código funciona de manera similar: http://jsfiddle.net/cwbMX/

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

Answer 2

Usted no tiene que poner en práctica una solución propia, ya existe un plugin que hace que ambos personajes y conteo de palabras: http://adamscheller.com/tinymce-count-characters-plugin/

Answer 3

la memoria de internet es interminable, y la mayoría de los hilos en tinymce no funcionan en la versión 4 Mi solución es simple: chang e el complemento de conteo de palabras de la siguiente manera: } return e + 'Chars:' + a.getContent(). length} y cambie el código onkeyup eliminando la verificación del código clave 32 a.on ("keyup", función (a) {b()})}, 0)}), funciona como un encanto inserción de estos resultados en la instancia tinymce necesita un plugin de hecho, sino que es una modificación menor del plugin de ejemplo para

Answer 4

sólo algunos consejos para aquellos que quieren trabajar con varias instancias de tineMCE.

...  
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. 
         } 
        }); 
       }