Vaadin RichTextArea 动态滚动到底部答案

【问题标题】：Vaadin RichTextArea dynamically scroll to bottomVaadin RichTextArea 动态滚动到底部
【发布时间】：2017-11-08 19:10:55
【问题描述】：

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

【问题讨论】：

添加您正在使用的 Vaadin/RichTextArea 版本以及用于将其插入问题的代码会很有帮助。

标签： java vaadin richtextarea

【解决方案1】：

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

创建扩展

扩展需要一个 Java 类，该类公开您可以从视图调用的方法，并声明您添加滚动代码的 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 对象可以注册一次扩展：

公共类 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);
}

【讨论】：

聪明的解决方案，谢谢。我为常规的 TextArea 而不是使用 setCursorPosition 这样做是因为我不希望 TextArea 获得焦点。我需要在创建 TextArea 时设置一个 id，因为没有另外分配。此处提供的 Javascript 源代码对我不起作用。我需要将函数的内容更改为： this.scrollToBottom = function(id) { var textarea = document.getElementById(id); textarea.scrollTop = textarea.scrollHeight; };