I am using the Summernote Text plugin inside my project. But it seems to be not working properly. The editable inside the Summernote doesn't show any text which I am typing. It only shows text when I resize the window in the browser. I am including the code below; I hope it helps.
<%-- Rendering modal--%>
<div id="TCModal" class="modal animated fadeIn" role="dialog">
<div class="modal-dialog modal-dialog-w-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close text-inverse" style="opacity: .5" data-dismiss="modal" aria-hidden="true"><i class="ion-close-circled"></i></button>
<h4 class="modal-title">Type Your Terms & Conditions </h4>
</div>
<div class="">
<div style="max-height: 500px" id="summernoteTermsAndCondition">
</div>
</div>
</div>
</div>
</div>
And the initialization for summer note is
$('#summernoteTermsAndCondition').summernote({
placeholder: '',
height: 200,
popover: {
air: [
['color', ['color']],
['font', ['bold', 'underline', 'clear']]
]
}
});
I am using the Summernote Text plugin inside my project. But it seems to be not working properly. The editable inside the Summernote doesn't show any text which I am typing. It only shows text when I resize the window in the browser. I am including the code below; I hope it helps.
<%-- Rendering modal--%>
<div id="TCModal" class="modal animated fadeIn" role="dialog">
<div class="modal-dialog modal-dialog-w-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close text-inverse" style="opacity: .5" data-dismiss="modal" aria-hidden="true"><i class="ion-close-circled"></i></button>
<h4 class="modal-title">Type Your Terms & Conditions </h4>
</div>
<div class="">
<div style="max-height: 500px" id="summernoteTermsAndCondition">
</div>
</div>
</div>
</div>
</div>
And the initialization for summer note is
$('#summernoteTermsAndCondition').summernote({
placeholder: '',
height: 200,
popover: {
air: [
['color', ['color']],
['font', ['bold', 'underline', 'clear']]
]
}
});
- 1 You need to reinitialize it after modal open. Modal create after DOM – Pedram Commented Jan 13, 2018 at 5:55
- @Mr.x Thanks it worked please put it an answer so that i can mark it as the solution. – Akhil Commented Jan 13, 2018 at 5:58
3 Answers
Reset to default 16In this case modal create after DOM so you need to initialize or re-initialize summernote after modal open:
$('#myModal').on('shown.bs.modal', function() {
$('#summernote').summernote();
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote-lite.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote-lite.css" />
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<div id="summernote">Hello Summernote</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>Or use dialogsInBody: trueor airMode: true
$('#summernote').summernote({
dialogsInBody: true
//,airMode: true
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote-lite.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote-lite.css" />
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<div id="summernote">Hello Summernote</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>Also you can read about shouldInitialize
I simply did this:
$('#postModal').on('shown.bs.modal', function () {
window.scrollTo({ top: $(".comments-container").position().top, behavior: 'smooth' });
})
Essentially I scrolled the DOM window and it fixed all the crappy edges and stuff on Summernote.
This was opened as an issue, also addressing tooltips on the github repo here: https://github.com/summernote/summernote/issues/2644