Skip to main content
 首页 » 编程设计

jquery之TinyMCE 字符计数不正确

2026年07月28日7yjmyzz

我在页面的文本区域上使用 TinyMCE。我正在尝试获取字符和字数以及输入的文本区域。我一直在尝试各种版本以使其正常工作,但没有成功。这是最新的有缺陷的版本:

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

这是我的例子。我输入的第一个单词为:Me 当我输入第一个单词时,它会正确显示字符和单词。但是当我按空格输入下一个单词时,它显示字符是8。怎么办? IMO,它也包括 HTML 标签。上述输入文本的 HTML 代码如下:

<p>Me&nbsp;</p> 

我预计输出为 1 个单词和 3 个字符(2 个字符 + 1 个空格)。但它向我展示了另外 5 个角色。这是怎么发生的以及我该如何阻止它?如果您确实输入了下一个单词,那么一旦开始输入,它就会显示正确的字符数。但是当你再次点击空格时,它会添加更多的角色。因此,每当按下空格键和输入按钮时,似乎就会出现此问题。如何解决这个问题?

请您参考如下方法:

如果你想做这样的事情,那么必须添加一个 jQuery 函数,如下所示: http://jsfiddle.net/uA9Jx/

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

假设这是您的 HTML:

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

然后你就可以:

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

这将导致:

This is bold and this is italic.

或者此代码的工作原理类似:http://jsfiddle.net/cwbMX/

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