无法在 spring 项目上显示 Summernote 文本区域

Question

在我当前的 spring 项目中，我有一个带有类似代码的管理页面（已简化以在此处显示）：

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
</ul>

<div class="tab-pane active" id="listagem" role="tabpanel" aria-labelledby="listagem-tab">
    <button type="button" class="btn btn-secondary" onclick="update_data(this)">
        <i class="fas fa-edit"></i>
    </button>
    <button type="button" class="btn btn-secondary" onclick="delete_data(this)">
        <i class="fas fa-trash"></i>
    </button>
</div>

单击按钮时，将添加一个新选项卡并将以下代码添加到选项卡窗格中：

<div id="form-container">
    <form class="form" id="form" method="post" action="#">
        ...
        <textarea rows="25" cols="80" class="summernote" id="descricao" name="descricao"></textarea>
        ...
    </form>
</div>

当我在浏览器中打开页面时，它应该显示一个所见即所得的文本区域。 summernote 的代码添加到管理页面的底部：

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/----------.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote-bs4.js"></script>
<script>
$(document).ready(function(){
  $('.summernote').summernote({height: 300});
});
</script>

<script th:src="@{/js/script-admin.js}"></script>

（summernote 的 css 文件已添加到页面顶部的 head 部分）。

但是当我实际运行项目并在浏览器中打开页面时，它显示的是一个简单的文本区域，没有任何summernote 样式。任何人都可以提示这里有什么问题吗？

ps.: 处理读取表单页面并添加到选项卡窗格的代码如下：

function insert_data() {
  if(document.getElementById('insert-tab').parentNode.style.display === 'none') {
    var url = document.getElementById('insert').dataset.url;

    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        var myObj = this.responseText;

        parser = new DOMParser();
        var doc = parser.parseFromString(myObj, "text/html");
        var form_html = doc.getElementById('form-container');

        document.getElementById('insert').innerHTML = form_html.innerHTML;
        document.getElementById('tab-insert').removeAttribute('style');

        document.getElementById("listagem-tab").classList.remove('show');
        document.getElementById("listagem-tab").classList.remove('active');
        document.getElementById("listagem").classList.remove('show');
        document.getElementById("listagem").classList.remove('active');

        document.getElementById("insert-tab").classList.add('show');
        document.getElementById("insert-tab").classList.add('active');
        document.getElementById('insert').classList.add('show');
        document.getElementById('insert').classList.add('active');
      }
    };
    xmlhttp.open("GET", url, true);
    xmlhttp.send();
  }
}

Answer 1

仅作记录，我通过将 javascript 代码添加到我的项目以跟踪上面 tab-pane div 中的更改并调用 $('.summernote').summernote(...) 当添加带有 class .summernote 的节点时。这是我的代码：

var tab_pane = document.getElementsByClassName("tab-pane");

for (i = 0; i < tab_pane.length; i++) {
  // Select the node that will be observed for mutations
  var targetNode = tab_pane[i];

  // Options for the observer (which mutations to observe)
  var config = { attributes: true, characterData: true, childList: true, subtree: true, attributeOldValue: true, characterDataOldValue: true };

  // Callback function to execute when mutations are observed
  var callback = function(mutationsList, observer) {
      for(var mutation of mutationsList) {
        if (mutation.type == 'childList')
            detect_editor();
        if (mutation.type == 'subtree')
            detect_editor();
      }
  };

  // Create an observer instance linked to the callback function
  var observer = new MutationObserver(callback);

  // Start observing the target node for configured mutations
  observer.observe(targetNode, config);
}

function detect_editor() {
  var editor = document.getElementsByClassName("summernote");
  for (i = 0; i < editor.length; i++) {
    $(editor).summernote({height: 300});
  }
}

无法在 spring 项目上显示 Summernote 文本区域

Unable to display Summernote textarea on spring project

javascript

css

wysiwyg

twitter-bootstrap

summernote