在前端使用tinymce计算单词

时间:2012-04-10 作者:Sagive

我正在使用带有wp\\U编辑器的前端内置(文章目录插件)tinymce<不管我怎么做,我都无法让单词计数器自动工作。。

我可以使用jquery单词计数器在HTML选项卡中很好地计算单词,但在wysisyg选项卡中却不能,因为它是一个iframe。。。

我有了一些新的白发来处理这个问题,非常感谢您的输入/帮助,甚至是gr8对解决方案的引用。

Here is the code i currently have (relevant part of the page) including
the jquery counter which i would rather not use and would rather use wordpress
or to be precise tinymce build in plugin / ability to count words as if inside the dashboard.

<script type="text/javascript">
$(document).ready(function() {
    $("[class^=\'count[\']").each(function() {
        var elClass = $(this).attr(\'class\');
        var minwords = 0;
        var maxWords = 0;
        var countControl = elClass.substring((elClass.indexOf(\'[\'))+1, elClass.lastIndexOf(\']\')).split(\',\');

        if(countControl.length > 1) {
            minwords = countControl[0];
            maxWords = countControl[1];
        } else {
            maxWords = countControl[0];
        }   

        $(this).after(\'<div class="wordcount"><strong>0</strong> Words</div>\');
        if(minwords > 0) {
            $(this).siblings(\'.wordcount\').addClass(\'errorwords\');
        }   

        $(this).bind(\'keyup click blur focus change paste\', function() {
            var numWords = jQuery.trim($(this).val()).split(\' \').length;
            if($(this).val() === \'\') {
                numWords = 0;
            }   
            $(this).siblings(\'.wordcount\').children(\'strong\').text(numWords);

            if(numWords < minwords || (numWords > maxWords && maxWords != 0)) {
                $(this).siblings(\'.wordcount\').addClass(\'errorwords\');
            } else {
                $(this).siblings(\'.wordcount\').removeClass(\'errorwords\');   
            }
        });
    });
});

</script>
<?php
        wp_print_scripts(\'quicktags\');
        require_once(ABSPATH . \'/wp-admin/includes/post.php\');
        function richedit() { return true; }
        add_filter(\'user_can_richedit\', \'richedit\');
            //wp_tiny_mce( false, array( \'height\' => \'370\' ) );
        if ($options[\'default_editor\'] == \'html\') {
            add_filter( \'wp_default_editor\', create_function(\'\', \'return "html";\') );
        } else {
            add_filter( \'wp_default_editor\', create_function(\'\', \'return "tinymce";\') );
        }
        wp_editor($_POST[\'post\'], \'minword\' , array(\'textarea_name\' => \'minword\', \'editor_class\' => \'count[50,0]\'));
    } else {
        echo \'<style type="text/css">#quicktags {display:none}</style>\';
        wp_editor($_POST[\'post\'], \'minword\' , array(\'textarea_name\' => \'minword\', \'editor_class\' => \'count[50,0]\'));
    }
?>

REVISED TO BETTER EXPLAIN @bueltge AND OTHER\'S MY PROBLEM...
我已经在线上传了一个临时版本,以便向您展示问题所在。

该网站是希伯来文的,因此您需要使用演示用户/密码组合登录,即:temp/temp

Url:HERE

然后单击最后一个按钮,表示从左侧开始的第一个
您将看到编辑器。尝试写入时,chars计数器不会更改,但如果单击HTML选项卡,则会看到chars计数器正在工作。。

So.. How can i get the counter to count when in wysisyg mode?

本例使用了buelge建议的代码,该代码对id进行了微小的更改-下面是我修改的前两行

var comment_input = $( \'#articleSubmit textarea\' );
var submit_button = $( \'#articleSubmit #submit\' );

3 个回复
最合适的回答,由SO网友:Sagive 整理而成

A while later i decided to try it again... (needed it for a project)
this time i went for clean jquery and i got it to work!

这里是:
工作和;在html编辑器和可视化编辑器中,在wp\\U编辑器中编写单词时,用一种简单易用的方法计算单词数。

<script type="text/javascript">
i=0;
$(document).ready(function(){
    // visual mode
    // the iframe id
    $("#description_ifr").ready(function () {
        setInterval(function(){
            var tinymceval = $(\'#description_ifr\').contents().find(\'body\').text();
            var wordscount = tinymceval.split(" ");
                    // you should crete a div with the 
                    // the id = #wordcount to show count
            $("#wordcount").text(wordscount.length);
        }, 5000)
    });

    // html mode
// #description is the id of the text area
    $("#description").keypress(function(){
        $("#wordcount").text(i+=1);
    });
}); 
</script>
谢谢大家的帮助;)

SO网友:ungestaltbar

因为评论的字符限制(讽刺:):

您可以尝试使用tinymce对象来获取内容,而不是通过类或什么来选择textarea。在你的情况下,这是tinyMCE。编辑。minword。获取内容。这将返回内容的长度。。不确定,但不管是在视觉模式还是html模式下。。。但即使重要,也要针对视觉模式使用(重复我自己)tinymce。编辑。minword。获取内容。要检查编辑器处于哪种模式,可以使用以下内容:

// get the container
container = $(\'.wp-editor-wrap\');

// check for current state
if ( $(container) ).hasClass(\'html-active\') ) 
    { ..html mode stuff.. }
else 
    { visual mode stuff }
其中html模式的东西/视觉模式的东西只是指切换键控功能的选择器。

编辑:确认。getContent不关心当前状态也可以查看此线程:How to get the input of a TinyMCE editor when using on the front-end?

所以使用tinyMCE即可。编辑##编辑器id##。获取当前使用的编辑器的长度。

EDIT:

没有测试,不能保证没有错误

<script type="text/javascript">
$(document).ready(function() {
    $("[class^=\'count[\']").each(function() {
        var elClass = $(this).attr(\'class\');
        // new line, editor id
    var elId = $(this).attr(\'id\');
        var minwords = 0;
        var maxWords = 0;
        var countControl = elClass.substring((elClass.indexOf(\'[\'))+1, elClass.lastIndexOf(\']\')).split(\',\');

        if(countControl.length > 1) {
            minwords = countControl[0];
            maxWords = countControl[1];
        } else {
            maxWords = countControl[0];
        }   

        $(this).after(\'<div class="wordcount"><strong>0</strong> Words</div>\');
        if(minwords > 0) {
            $(this).siblings(\'.wordcount\').addClass(\'errorwords\');
        }   

        $(this).bind(\'keyup click blur focus change paste\', function() {

            // new line, reference element ID
        var content = get_tinymce_content(elId);
            // changed line
            var numWords = jQuery.trim(content).split(\' \').length;
            if($(this).val() === \'\') {
                numWords = 0;
            }   
            $(this).siblings(\'.wordcount\').children(\'strong\').text(numWords);

            if(numWords < minwords || (numWords > maxWords && maxWords != 0)) {
                $(this).siblings(\'.wordcount\').addClass(\'errorwords\');
            } else {
                $(this).siblings(\'.wordcount\').removeClass(\'errorwords\');   
            }
        });
    });
});


function get_tinymce_content(elId){
    if (jQuery("#"+elId+"-wrap").hasClass("tmce-active")){
        return tinyMCE.editors.elId.getContent();
    }else{
        return jQuery(\'#\'+elId).val();
    }
}
</script>

SO网友:bueltge

您可以在中找到我的文字注释计数器解决方案this answer; 但您也可以将其用于其他ID来计算前端编辑器中的字数。

结束