0
我正在构建一个使用Bootstrap模块的系统,它从隐藏的Div中提取内容并将其添加到引导模式中的模态体类。jQuery .html()打破Summernote
问题是,当我通过.html()加载它时,它杀死了Summernote编辑器上的工具栏,但是,快捷方式正常工作。
下面是一些代码:
代码
\t $(".home-options a").click(function() {
\t var _modal = $('#homeOptionModal');
\t var _this = $(this);
\t var _header = _this.find("h1").text();
\t var _tcontent = _this.find(".option-content").html();
\t _modal.modal('show');
\t _modal.find(".modal-title").html(_header);
\t _modal.find(".modal-body").html(_tcontent);
\t });
\t $('.summernote').summernote({
\t toolbar: [
\t // [groupName, [list of button]]
\t ['style', ['bold', 'italic', 'underline', 'clear']],
\t ['font', ['strikethrough', 'superscript', 'subscript']],
\t ['para', ['ul', 'ol', ]]
\t ]
\t });
.modal-dialog {
margin: 80px auto;
}
.modal-content {
border: 5px solid #2A9CFF;
border-radius: 0px;
}
.option-content {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.js"></script>
<div class="row home-options">
<div class="modal fade" id="homeOptionModal" tabindex="-1" role="dialog" aria-labelledby="homeOptionModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="homeOptionModalLabel"></h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<a href="#" class="col-xs-12 col-sm-6">
<div class="option-square">
<h1>Click me</h1>
<div class="option-content">
<div class="form-group">
<input type="text" placeholder="Full Name" class="form-control" id="fullname" value="" />
</div>
<div class="form-group">
<input type="text" placeholder="What's your current job?" class="form-control" id="job" value="" />
</div>
<div class="form-group">
<input type="text" placeholder="What city are you in?" class="form-control" id="location" value="" />
</div>
<div class="form-group">
<textarea class="summernote" placeholder="Tell us a little more about yourself. What makes you tick?" id="bio">Content goes here</textarea>
</div>
</div>
</div>
</a>
</div>
正如你所看到的,在工具栏只是打破,并且不与互动文本。我尝试过很多东西,但它似乎死了。
我在Modals网站上的多个textareas上也使用了summernote。
任何帮助将不胜感激。
@MattyClarke,如果这个答案解决您的问题,请接受它。 – Paul