1

現在、後で自分の Web サイトに実装する wmd エディターを使用しています。設定を変更して非表示の入力フィールドを追加することで、 #wmd-previewdivの値を取得できました。markdown問題は JS/AJAX 関数にあります。テキスト領域に何かを入力すると、結果がエコーされますが、戻って単語に太字を適用すると、実際にもう一度何かを入力するまで変更がエコーされません。

フォント スタイルの変更が単語に適用されたときに、再度入力せずに div 値をエコーするにはどうすればよいですか? これが私の例です

<script>
     $(document).ready(function() {
        var timer = null; 
        var dataString;   
        function submitForm(){
        $.ajax({ type: "POST",
             url: "test1.php",
             data: dataString,
             success: function(result){
        $('#wmd_result').html( $('#resultval', result).html()); 
                    }
    });
     return false;
}

 $('#wmd-input').on('keyup click', function() {
    clearTimeout(timer);
    timer = setTimeout(submitForm, 1000);
    var wmdVal = $("#wmd-preview").html();
    dataString = 'wmdVal='+ wmdVal;
});
}); 
</script>
4

5 に答える 5

2

あなたは試すことができます

$('#wmd-button-bar').click(function() {
    clearTimeout(timer);
    timer = setTimeout(submitForm, 1000);
    var wmdVal = $("#wmd-preview").html();
    dataString = 'wmdVal='+ wmdVal;
});
于 2012-07-31T05:21:42.647 に答える
1

#wmd-inputテキストエリアのイベントのみをリッスンしています。太字のボタンをクリックすると、そのテキスト領域の内容が変更される場合がありますが、これは編集イベントではなく、ブラウザーでトリガーされるイベントはありません。テキスト領域を変更しているのではなく、押したボタンに関連付けられている機能によって変更されています。

クリック リスナーを追加する.wmd-buttonと、そのイベントをキャプチャできるようになります。

これがどのように機能するかを示すjsfiddleです。

編集:コード例を追加しました。

.wmd-button次のように、クラスを jQuery リスナーに追加するだけです。

 $('#wmd-input, .wmd-button').on('keyup click', function() {...

通常、wmd スタイリング コードの後に​​コードが実行されるように、リスナーの順序に注意を払う必要がありますが、関数にタイムアウトがあるため、問題にならない可能性があります。

于 2012-07-31T05:39:45.743 に答える
0

私はあなたが考慮したいと思うかもしれない別の方法を提案したいと思います。

イベントの処理はモンスターに変わる可能性があります。たとえば、誰かが次のコード行を提供しました $('#wmd-input, .wmd-button').on('keyup click', function() {...

これにより、入力フィールドをクリックするたびにイベントが発生します!! (編集のためにフォーカスするたびに入力フィールドをクリックします)。

毎秒多くのイベントが発生する可能性があることを忘れないでください。これにより、サーバーがリクエストで爆発する可能性があります。

より良い方法は、間隔関数を設定することです。このメソッドは、入力フィールドから値を読み取り、それを最後の値と比較します。何かが変わった場合-先に進んでAjaxリクエストを行い、それ以外の場合は何もしません。

このようにして、Ajaxリクエストが行われるレートを制御し、イベントについて心配する必要はありません。突然、新しいボタンのセット、入力フィールド、または画像を挿入するためのポパスなどができた場合は、この方法で作業が簡単になります。

欠点としては、間隔が長くなると、入力とプレビューの間に遅延が発生します。

この間隔メソッドの擬似コードは次のようになります

$(function(){
    var lastValue = null;
    setInterval( function(){
         var newValue =   $("#wmd-preview").html();

         if ( lastValue == null || newValue.localeCompare( lastValue ) == 0 ){
               lastValue = newValue;
               // preview code here
         }

         // else do nothing
    }, 1000 );
});
于 2012-08-10T22:47:34.133 に答える
0

たとえば、単語をクリックすると機能しますが、イベントハンドラーとしてのみ持っているだけですkeyup。同様にclick追加してみて、それが機能するかどうかを確認してください。change

于 2012-07-31T05:20:13.540 に答える
0

代わりに change イベントを使用してみてはいかがでしょうか。

 $('#wmd-input').change(function() {
clearTimeout(timer);
timer = setTimeout(submitForm, 1000);
var wmdVal = $("#wmd-preview").html();
dataString = 'wmdVal='+ wmdVal;

});

于 2012-07-31T05:21:27.110 に答える