Bootstrap模態中的夏季注釋問題

Question

我在我的項目中使用Summernote Text插件。 但它似乎無法正常工作。 Summernote中的可編輯內容未顯示我正在鍵入的任何文本。 它只在我在瀏覽器中調整窗口大小時顯示文本。 我包括下面的代碼; 我希望它有所幫助。

 <%-- 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 &nbsp;</h4>
         </div>
         <div class="">
            <div style="max-height: 500px" id="summernoteTermsAndCondition">
            </div>
         </div>
      </div>
   </div>
</div>

夏天音符的初始化是

 $('#summernoteTermsAndCondition').summernote({
            placeholder: '',
            height: 200,
            popover: {
                air: [
                  ['color', ['color']],
                  ['font', ['bold', 'underline', 'clear']]
                ]
            }
        });

Answer 1

在這種情況下， modal在DOM之后創建，因此您需要在模態打開后初始化或重新初始化summernote：

 $('#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">&times;</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> 

或者使用dialogsInBody: true或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">&times;</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> 

您還可以閱讀有關shouldInitialize的信息

Answer 2

我只是這樣做：

$('#postModal').on('shown.bs.modal', function () {
        window.scrollTo({ top: $(".comments-container").position().top, behavior: 'smooth' });
    })

基本上我滾動了DOM窗口，它修復了Summernote上所有糟糕的邊緣和東西。

Answer 3

這是一個問題，也在這里解決github repo上的工具提示： https ： //github.com/summernote/summernote/issues/2644