Bootstrap - 所见即所得 HTML5 编辑器不更新底层文本区域答案

【问题标题】：Bootstrap - WYSIWYG HTML5 editor not updating underlying textareaBootstrap - 所见即所得 HTML5 编辑器不更新底层文本区域
【发布时间】：2013-02-25 16:50:59
【问题描述】：

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

【问题讨论】：

标签： jquery twitter-bootstrap wysihtml5

【解决方案1】：

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

固定版本：

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

});

为了记录，如果其他人遇到同样的事情，一个简单的解决方法是简单地从您传递到实例的处理程序中触发下面的 textarea 上的“更改”，所以是这样的：

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

});

老实说，这就是我从一开始就期望控件工作的方式。

【讨论】：

感谢您花时间发布您的解决方案！