2012-07-06 12 views
5

私のページのテキストエリアでTinyMCEを使用しています。私は文字と単語数を取得しようとしており、テキストエリアに入力されています。私は正しく動作させるために様々なバージョンを試してきましたが、成功しませんでした。最新のバグバージョン: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> 

Iが出力1つのワード及び3つの文字(2文字+ 1つの空間)であることを期待します。しかし、それは私に5文字以上を示しています。これはどのように起こるのですか?&どうすれば停止できますか?次の単語を入力すると、入力を開始するとすぐに、正しい文字カウントが表示されます。しかし、再びスペースを叩くと、それ以上の文字が追加されています。だからこの問題は、スペースが&の入力ボタンが押されたときにいつも起きているようです。どのようにこれを修正することができますか?

答えて

1

あなたはこのような何かをしたい場合はそうのように、その後、jQueryの機能を追加する必要があります。

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

そしてあなたは:http://jsfiddle.net/uA9Jx/

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

これはあなたのHTMLであると仮定

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

になります:

This is bold and this is italic.

それとも、このコードは同じように動作します:http://jsfiddle.net/cwbMX/

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

こんにちは、ありがとうコードです。上記の両方のコードを試してみましたが、同じ問題はそのままです。いくつかの奇妙な理由で、HTMLタグを削除していません。それを考慮している。それは入力されたテキストを取ったはずですが、代わりにHTMLソースを検討しています。私はそれを2回適用しましたが、それでも同じ効果があります。このコードを試してみると、replace関数を適用した後でもHTML出力を警告することがわかります: 'var strip =(tinyMCE.activeEditor.getContent())。置き換える(/ <\/?[^>)+>/gi、 ''); \t \t \t \t \t \t警告(strip.replace(/ <\/?[^>] +>/GI、 '')); 'この問題を解決する方法上の任意のアイデア? – Devner

0

インターネットのメモリは無限で、tinymceのスレッドのほとんどはバージョン4では動作しません。 私のソリューションは簡単です:chang ( "keyup"、function(a));キーコードのチェックを取り除いてonkeyupコードを変更します。 a.on( "keyup"、function(a)):){B()})}、0)})、TinyMCEのインスタンスにこれらの結果を挿入魅力 等 作品は、実際のプラグインを必要とし、それは

0

ちょうどいくつかのヒントをプラグイン例のマイナー改変であります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. 
         } 
        }); 
       } 
関連する問題