Неверное количество символов в 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. Как? ИМО, включая HTML-теги. Код HTML для приведенного выше текста выглядит следующим образом:

<p>Me&nbsp;</p>

Я ожидаю, что результат будет 1 слово и 3 символа (2 символа + 1 пробел). Но это показывает мне еще 5 символов. Как это происходит и как я могу это остановить? Если вы введете следующее слово, как только вы начнете печатать, будет показано правильное количество символов. Но когда вы снова нажимаете пробел, он добавляет больше символов. Так что эта проблема, кажется, возникает всякий раз, когда нажимаются клавиши пробела и ввода. Как это можно исправить?

Источник

4 ответа

Если вы хотите сделать что-то подобное, добавьте функцию 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, '') );
Источник

Интернет-память бесконечна, и большинство версий в tinymce не работают в версии 4. Мое решение простое: измените плагин wordcount следующим образом: } верните e + ' Chars: '+a.getContent().length} и ​​измените код onkeyup, исключая проверку для кода ключа 32 a.on("keyup",function(a){b()})},0)}), работает как брелок, для вставки этих результатов в экземпляр tinymce действительно нужен плагин, но это небольшая модификация примера плагина

Источник

Несколько советов для тех, кто хочет работать с несколькими экземплярами 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.
                        }
                    });
                }
Источник

Вам не нужно реализовывать собственное решение, там уже есть плагин, который обрабатывает как символы, так и слова: http://adamscheller.com/tinymce-count-characters-plugin/

Источник
Другие вопросы по тегам