- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
在我当前的 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>
单击按钮时,将添加一个新选项卡并将以下代码添加到选项卡 Pane :
<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.: 处理读取表单页面并添加到选项卡 Pane 的代码是这样的:
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();
}
}
最佳答案
仅作记录,我通过将 javascript 代码添加到我的元素以跟踪上面 tab-pane
div 中的更改并调用 $('.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});
}
}
关于javascript - 无法在 spring 元素中显示 Summernote textarea,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57974528/
我知道如何在简单的html文本框中删除文本,但是html textareas似乎要复杂得多。而不是value属性,而是将文本放置在之间: . 这就是为什么我在制作onFocus和onBlur
这个问题在这里已经有了答案: text from one textarea should get copy to another textarea and original textarea sh
我实现了一个 在 Elm 中,选项卡缩进和取消缩进,而不是将焦点转移到另一个 HTML 元素。效果很好,除了取消缩进有时会导致选择消失!如果我选择第 5 个字符到第 12 个字符,我按 shift-t
是否可以更改 TextArea 的字体?我需要一个固定宽度的字体来显示一些原始数据,这些数据被格式化为在控制台的列中显示。 最佳答案 您可以使用 CSS 来实现,只需为您的应用程序创建一个主题并添加以
换行符或 pharagraph 在 textarea 输出中不起作用?例如,我在 textarea 中为 pharagraph 使用 enter 但在输出中不起作用?我怎样才能做到这一点? $("#s
这个问题在这里已经有了答案: How to calculate the pixel width of a String in JavaFX? (4 个回答) 6年前关闭。 如何计算 TextArea
我正在尝试使用两个不同的 textarea s 显示相同的代码,但有一个母版和另一个副本。在副本textarea ,我想强调更改,类似于 GitHub 在我们进行一些更改时提供的内容。 我想知道这是否
我需要允许用户突出显示文本(用鼠标选择一个范围),然后我想让他们能够通过下拉右键菜单将某些设置应用于该文本。 我知道后半部分。但是如何获取从 JavafX 的文本区域中选择的文本字符串? 另外,我可以
我使用 TinyMCE。 如果我在我的 textarea(编辑器)中插入另一个 texarea,tinymce 认为这个的结束标记是相关的,所以他关闭了编辑器。所有代码都可以在编辑器之外找到... 你
假设我有两个文本区域... 文本区域 1 文本区域 2 Hi There. 我希望能够将我在文本区域一中输入的文本添加到文本区域二中的文本之后。例如:如果我写“我的名字是乔”。在文本区域一中,它将同
我通过点击一个按钮来实现这个 Bootstrap Modal。但是在点击按钮时,模态出现在屏幕上,除了文本区域字段之外的每个字段都正确显示,按钮代码和文件上传代码在它下面,正在进入文本区域,为什么会这
现在我在获取值时遇到了问题 ~ 我正在执行一个功能,当我单击一个按钮时,它会显示一个模式,并且在其中有一个文本区域。将所有内容写入其中后,单击“确定”按钮,它将使用您编写的文本创建一个新的文本区域。你
我有一个呈现文本区域字段的 HTML 模板和 CSS,但是当单击该字段时,光标从文本区域的中间开始,而不是我期望的从左上角开始。 这不会出现在 IE 中,但会出现在 Chrome 和 FF 中。我还得
我有一个在页面上运行的 TinyMCE 实例,它使我能够编辑现有帖子。我查询数据库,并填充变量 $content与存储的文本。然后我有以下 HTML: Content: " > TinyMCE 显示为
每当有人在 textarea 中按 Enter 键时,我都会调用一个函数.现在我想禁用 new line或 break按下回车键时。 所以new line按下 shift+enter 时应该可以工作。
我有一个带有一些 TextArea 元素的 GUI 来显示信息。由于 GUI 将对 keyevents 使用react,因此我在场景元素中添加了一个 EventHandler。因为我不想为每个文本区域
我想用 jquery 在文本区域中插入图像。 (我知道 img 标签无法插入到文本区域中)。我正在使用tinymce jquery: tinyMCE.init({ mod
为什么这行不通?这里的input类型是text: var name = $("input[name='Event[name]']").serializeArray(); name = name[0].
我正在研究一种解决方案,当您在 TextArea 中键入文本时,它应该通知用户还剩下多少字符需要输入。比如你只能输入200之类的。这很容易制作,但我希望计数器显示在 TextArea 的背景中而不是单
“文本区域类型属性”有什么用? W3foos says this: The type property returns which type of form element a text area i
我是一名优秀的程序员,十分优秀!