2

アプリケーションで Bootstrap-WYSIWYG ( http://jhollingworth.github.com/bootstrap-wysihtml5/ )を使用しようとしています。テキストエリアをページに挿入してから、エディターをインスタンス化しています。ここまでは順調ですね。しかし、それは基になるテキストエリアを更新していないので、理由がわかりません。問題を示すために JSFiddle を作成しました: http://jsfiddle.net/8ckgf/2/

これが機能しない理由を誰かが理解できれば、私は感謝します。

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet" media="screen">
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-button.js"></script>

    <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-button.js"></script>
        <script src="http://xing.github.com/wysihtml5/dist/wysihtml5-0.3.0.js"></script>
        <script src="http://jhollingworth.github.com/bootstrap-wysihtml5/src/bootstrap-wysihtml5.js"></script>

<script>
$(document).ready(function(){
    $('.log').append("Setting up");
    var uuid = "abc123";
    var stuff = '<textarea id="f'+uuid +'" class="wysiwyg"  >Some html</textarea>';

    $('#holder').html(stuff);

    $('#f'+uuid).on('change',function(){
        var val = $(this).val();
        $('.log').append(val);    
    });

    $('#f'+uuid).wysihtml5();
    $('#f'+uuid).change(function(){
        $('.log').append("Value has changed");
    });
});
</script>
  </head>
  <body>
    <h1>WYSIWYG Test</h1>
      <div id="holder"></div>
    <div class="log"></div>
  </body>
</html>
4

1 に答える 1

2

OK、私は最終的にこれを自分で修正しました。何らかの理由で、WYSIHTML5 プロジェクトの Bootstrap ラッパーは、元のテキストエリアに対してイベントをトリガーしていないようです。代わりに、エディターを初期化するときにイベントを宣言する必要があります。それに応じて JSFiddle を更新しました。

修正版:

$('textarea').wysihtml5({
   "events": {
      "blur": function() { 
         var val = $('textarea').val();
         $('.log').append(" From blur "+val);
      }
   }

});

記録として、他の誰かが同じことに出くわした場合、簡単な修正は、インスタンスに渡すハンドラー内から下のテキストエリアで「変更」をトリガーすることです。次のようになります。

$('textarea').wysihtml5({
   "events": {
      "blur": function() { 
         $('textarea').trigger('change');
      }
   }

});

これは、正直に言うと、コントロールが最初から機能することを期待していた方法です。

于 2013-02-23T12:28:06.650 に答える