java - 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 类，该类公开您可以从 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);
}