Я создаю систему, которая использует модальные окна Bootstrap, она извлекает содержимое из скрытого Div и добавляет его в класс модального тела внутри модального окна начальной загрузки.
Проблема в том, что когда я загружаю его через .html(), он убивает панель инструментов в редакторе Summernote, однако ярлыки работают.
Вот часть кода:
Код
$(".home-options a").click(function() {
var _modal = $('#homeOptionModal');
var _this = $(this);
var _header = _this.find("h1").text();
var _tcontent = _this.find(".option-content").html();
_modal.modal('show');
_modal.find(".modal-title").html(_header);
_modal.find(".modal-body").html(_tcontent);
});
$('.summernote').summernote({
toolbar: [
// [groupName, [list of button]]
['style', ['bold', 'italic', 'underline', 'clear']],
['font', ['strikethrough', 'superscript', 'subscript']],
['para', ['ul', 'ol', ]]
]
});
.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>
Как видите, панель инструментов просто ломается и не взаимодействует с текстом. Я пробовал несколько вещей, но он просто умирает.
Я также использую Summernote в нескольких текстовых областях вокруг веб-сайта в модальных окнах.
Любая помощь будет принята с благодарностью.