Bootstrap -所见即所得HTML5编辑器不更新底层文本区
Bootstrap -所见即所得HTML5编辑器不更新底层文本区
提问于 2013-02-23 00:59:47
我正在尝试在我的应用程序中使用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>回答 1
Stack Overflow用户
发布于 2013-02-23 20:28:07
好了，最后我自己解决了这个问题。出于某些原因，围绕WYSIHTML5项目的Bootstrap包装器似乎不会触发针对原始文本区域的事件。相反，您需要在初始化编辑器时声明事件。我已经相应地更新了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');
}
}
});老实说，这就是我从一开始就期望控件工作的方式。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15029381
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号