2

我正在尝试在我的应用程序中使用 Bootstrap-WYSIWYG ( http://jhollingworth.github.com/bootstrap-wysihtml5/ )。我将 textarea 注入页面，然后实例化编辑器。到目前为止，一切都很好。但它没有更新底层的文本区域，我不知道为什么。我创建了一个 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

好的，最后我自己解决了这个问题。出于某种原因，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 回答