Question

我正在尝试在我的应用程序中使用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>

Answer 1

好的，我最后自己解决了这个问题。出于某种原因，围绕WYSIHTML5项目的Bootstrap包装器似乎不会触发针对原始textarea的事件。相反，您需要在初始化编辑器时声明事件。我相应地更新了JSFiddle。

修正版：

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

});

对于记录，如果其他人遇到同样的事情，一个简单的解决方法是简单地在你传递给实例的处理程序中触发下面textarea的'change'，所以像这样：

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

});

这就是我从一开始就期望控件能够正常工作的方式。说实话。

Bootstrap - WYSIWYG HTML5编辑器不更新底层textarea

1 个答案: