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

Bootstrap模态中的夏季注释问题

3 个答案: