我有一个来自 Vaadin 的基本 RichTextArea,我已删除了其中的工具栏。
普通的TextArea有setCursorPosition函数,但RichTextArea没有。
我需要 HTML 格式,这就是我不使用 TextArea 的原因。
如果无法动态滚动到底部,是否应该使用一个元素来代替?
我正在使用 Vaadin 7.7.10
这就是我创建和插入元素的方式
textArea = new RichTextArea("Console");
textArea.addStyleName("no-toolbar-top");
textArea.addStyleName("no-toolbar-bottom");
最佳答案
您可以创建滚动到富文本区域底部的 JavaScriptExtension。
创建扩展
扩展需要一个 Java 类,该类公开您可以从 View 中调用的方法,并声明您添加滚动代码的 JavaScript 文件。
本示例使用富文本区域的 ID 进行滚动。
@JavaScript("richtextarea-extension.js")
public class ScrollRichTextAreaExtension extends AbstractJavaScriptExtension {
public ScrollRichTextAreaExtension(UI ui) {
extend(ui);
}
public void scrollToBottom(RichTextArea richTextArea) {
callFunction("scrollToBottom", richTextArea.getId());
}
}
JavaScript文件可以放在src/main/resources下。该文件可能位于路径 src/main/resource/com/mika/richtextarea/richtextarea-extension.js
请注意,Java 包和类名称是此 JavaScript 文件第一行的一部分。
window.com_mika_richtextarea_ScrollRichTextAreaExtension = function() {
var connector = this;
this.scrollToBottom = function(id) {
var iframe = document.querySelector("#" + id + " iframe");
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
var scrollableContent = iframeDocument.body;
scrollableContent.scrollTop = scrollableContent.scrollHeight;
};
};
在 UI 中使用扩展
每个 UI 对象可以注册一次扩展:
公共(public)类 MyUI 扩展 UI { 私有(private) ScrollRichTextAreaExtension 扩展;
@Override
protected void init(VaadinRequest vaadinRequest) {
extension = new ScrollRichTextAreaExtension(this);
setContent(createContent());
}
最后,您可以滚动到我的调用扩展方法的底部。这将调用浏览器中的 JavaScript,并且 JavaScript 代码实际移动滚动位置。
private void onScrollButtonClick(ClickEvent clickEvent) {
extension.scrollToBottom(richTextArea);
}
关于java - Vaadin RichTextArea 动态滚动到底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47159493/