Số ký tự TinyMCE không chính xác

Question

Tôi đang sử dụng TinyMCE trên một vùng văn bản trong trang của mình. Tôi đang cố gắng để có được nhân vật và số lượng từ và textarea được gõ vào. Tôi đã thử các phiên bản khác nhau để làm cho nó hoạt động chính xác, nhưng không thành công. Đây là phiên bản lỗi mới nhất:

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

    }); 
}); 

Đây là ví dụ của tôi. Tôi đang nhập từ đầu tiên là: Me Khi tôi nhập từ đầu tiên, từ đó sẽ hiển thị các ký tự và từ chính xác. Nhưng ngay sau khi tôi nhấn không gian để nhập từ tiếp theo, nó cho thấy các ký tự là 8. Làm thế nào? IMO, bao gồm cả các thẻ HTML. Mã HTML như sau cho văn bản được nhập ở trên:

<p>Me&nbsp;</p> 

Tôi mong đợi đầu ra là 1 từ và 3 ký tự (2 ký tự + 1 dấu cách). Nhưng nó cho tôi thấy thêm 5 nhân vật nữa. Làm thế nào điều này xảy ra & làm thế nào tôi có thể ngăn chặn nó? Nếu bạn nhập từ tiếp theo, ngay khi bạn bắt đầu nhập, nó sẽ hiển thị số ký tự chính xác. Nhưng khi bạn nhấn không gian một lần nữa, nó thêm nhiều nhân vật hơn. Vì vậy, vấn đề này dường như xảy ra bất cứ khi nào không gian & nhập các nút được nhấn. Làm thế nào để sửa cái này?

Answer 1

Nếu bạn muốn làm một cái gì đó như thế này, sau đó phải thêm một chức năng jQuery như vậy: http://jsfiddle.net/uA9Jx/

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

Giả sử đây là HTML của bạn:

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

Và sau đó bạn làm:

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

nào sẽ cho kết quả:

This is bold and this is italic.

Hoặc mã này hoạt động tương tự: http://jsfiddle.net/cwbMX/

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

Answer 2

Bạn không cần phải thực hiện giải pháp của riêng, đã có một plugin mà hiện cả hai nhân vật và số lượng từ: http://adamscheller.com/tinymce-count-characters-plugin/

Answer 3

Bộ nhớ của internet là vô hạn và hầu hết các chủ đề trên tinymce không hoạt động trong phiên bản 4 Giải pháp của tôi rất đơn giản: chang e plugin wordcount như sau: } trả lại e + 'Chars:' + a.getContent(). length} và thay đổi mã onkeyup bằng cách loại bỏ việc kiểm tra mã khóa 32 a.on ("keyup", chức năng (a) {b()})}, 0)}), hoạt động giống như nét duyên dáng chèn các kết quả này vào trong ví dụ tinymce cần plugin thực sự, nhưng đó là một sửa đổi nhỏ của plugin ví dụ

Answer 4

Chỉ một vài mẹo cho những ai muốn làm việc với nhiều trường hợp 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. 
         } 
        }); 
       }