0

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

1 回答 1

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);
}
于 2017-11-08T11:10:55.277 回答