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

Question

在我当前的春季项目中，我有一个管理页面，其中包含这样的代码(简化为在此处显示(：

<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>

当我在 THR 浏览器中打开页面时，它应该显示一个所见即所得的文本区域。 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>

(CSS文件为Summernote它添加到页面顶部的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 代码添加到我的项目中来跟踪上面divtab-pane中的更改，并在添加具有类.summernote的节点时调用$('.summernote').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});
}
}