5

ページのテキストエリアで 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文字表示されます。これはどのように発生し、どうすれば停止できますか? 次の単語を入力すると、入力を開始するとすぐに正しい文字数が表示されます。しかし、もう一度スペースを押すと、さらに文字が追加されます。そのため、この問題は、スペースとエンター ボタンが押されるたびに発生しているようです。これはどのように修正できますか？

4

4 に答える 4

1

このようなことをしたい場合は、次のような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, '') );
于 2012-07-06T18:07:56.317 に答える
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.
                        }
                    });
                }
于 2015-04-03T22:10:18.390 に答える
0

インターネットのメモリは無限で、tinymce のほとんどのスレッドはバージョン 4 では動作しません。私の解決策は簡単です。次のように wordcount プラグインを変更します: }return e + ' Chars: '+a.getContent().length} と変更キーコード 32 a.on("keyup",function(a){b()})},0)}) のチェックを排除することによる onkeyup コードは、これらの結果を tinymce インスタンスに挿入するチャームのように機能し、実際にはプラグインが必要です。 、しかしそれはサンプルプラグインのマイナーな変更です

于 2015-01-26T17:32:32.643 に答える