web-dev-qa-db-ja.com

フロントエンドでtinymceを使って単語を数える 

私はwp_editorで（記事ディレクトリプラグイン）tinymceに組み込まれたフロントを使用しています。
私が今までに試したことがあると、Wordカウンターを自動的に機能させることができません。

私はjquery Word counterを使ってHTMLタブの単語をうまく数えることができますが、そうではありません。
iframe以降のwysisygタブに...

私はこの問題を扱ういくつかの新しい白い毛を得ました、そして本当に感謝するでしょう
あなたのインプット/ヘルプ、あるいは解決策へのgr8の参照。

これは私が現在持っているコード（ページの関連部分）です。
jquery counter私は使わないほうがいいし、むしろwordpressを使いたい
または正確に言うと、ダッシュボードの中にあるかのように単語を数えるプラグイン/機能が組み込まれています。 

<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]'));
    }
?>

。

@bueltgeやその他の問題をより明確に説明するために改訂しました...
オンラインで一時バージョンをアップロードしたので、問題を確認できます。

ウェブサイトはヘブライ語ですので、ログインが必要です
次のデモユーザー/パスの組み合わせを使用します。temp/temp

URL： _ここ_

次に左から最初のボタンをクリックしてください。
そこにあなたはエディタを見るでしょう。書き込もうとすると結果が出る
charsカウンタは変わりませんが、[HTML]タブをクリックすると
は、charsカウンタが機能していることを確認します。

だから..どのように私はwysisygモードでカウンタを数えることができますか？

この例では、コードの不備を示唆しています
をidに - これは私が変更した改訂された上の2行です

var comment_input = $( '#articleSubmit textarea' );
var submit_button = $( '#articleSubmit #submit' );
tinymcefront-endwp-editor
2
Sagive SEO

しばらくしてからもう一度試してみることにしました...（プロジェクトに必要でした）
今回はきれいなjqueryに行き、それがうまくいった！

ここにあります：
wp_editorの中に書かれている間に単語を数えるための実用的で使いやすい方法
HTMLエディタとビジュアルエディタ。

<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>

Eveyoneの助けをありがとう;）

2
Sagive SEO

コメントのためのchar制限のために答えとしてこれをしなければなりません（皮肉:)）：

あなたは、クラスまたは何によってtextareaを選択する代わりに、内容を取得するためにtinymceオブジェクトを使うことを試みることができます。あなたの場合はtinyMCE.editors.minword.getContentです。これは、コンテンツの長さを返します。確かに、それがビジュアルモードであるかhtmlモードであるかは問題ではありません...しかし、たとえそれが重要であっても、ビジュアルモードの使用をターゲットにすることを繰り返します。 .getContentどのモードでエディタがあなたであるかをチェックするためには、以下のようなものを使うことができます。

// 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は現在の状態を気にしないことを確認するためにも、このスレッドを参照してください： フロントエンドで使用するときにTinyMCEエディタの入力を取得する方法？

そう。現在使用中のエディタの長さを取得するには、tinyMCE.editors。## editor_id ##。getContentを使用するだけです。

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>
1
ungestaltbar

あなたは この答えに の中のコメントのための言葉のカウンターのための私の解決策を見つけます。ただし、これを他のIDに使用して、フロントエンドエディタで単語を数えることもできます。

0
bueltge