我正在尝试在我的应用程序中使用 Bootstrap-WYSIWYG ( http://jhollingworth.github.com/bootstrap-wysihtml5/ )。我将文本区域注入(inject)页面，然后实例化编辑器。到目前为止，一切都很好。但它没有更新底层文本区域，我不明白为什么。我创建了一个 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>
最佳答案
好吧，我最终自己解决了这个问题。由于某种原因，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');
}
}
});
老实说，这就是我从一开始就期望控件发挥作用的方式。
关于jquery - Bootstrap - WYSIWYG HTML5 编辑器不更新底层文本区域，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15029381/