Vaadin RichTextArea动态滚动到底部

Question

我有一个来自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");

Answer 1

您可以创建滚动到富文本区域底部的JavaScriptExtension。

创建扩展

扩展需要一个Java类，该类公开可以从视图中调用的方法，并声明JavaScript文件，并在其中添加滚动代码。

本示例使用RTF区域的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对象可以注册一次扩展：

公共类MyUI扩展UI {私有ScrollRichTextAreaExtension扩展；

@Override
protected void init(VaadinRequest vaadinRequest) {
    extension = new ScrollRichTextAreaExtension(this);
    setContent(createContent());
}

最后，您可以滚动到我的调用扩展方法的底部。 这将在浏览器中调用JavaScript，实际上是JavaScript代码移动了滚动位置。

private void onScrollButtonClick(ClickEvent clickEvent) {
    extension.scrollToBottom(richTextArea);
}