Vaadin RichTextArea动态滚动到底部

时间:2017-11-07 13:43:32

标签: java vaadin richtextarea

我有一个来自Vaadin的基本RichTextArea,我删除了工具栏。

普通的TextArea有一个setCursorPosition函数,但RichTextArea没有。

我需要HTML格式,这就是我不使用TextArea的原因。

如果无法动态滚动到底部,是否应该使用一个元素?

我正在使用Vaadin 7.7.10

这就是我创建和插入元素

的方法
public const int com_facebook_smart_login_confirmation_title_m2gender = 2131230763;

// aapt resource value: 0x7f080016
public const int com_facebook_tooltip_default = 2131230742;

// aapt resource value: 0x7f08002c
public const int com_facebook_tooltip_default_f1gender = 2131230764;

// aapt resource value: 0x7f08002d
public const int com_facebook_tooltip_default_m2gender = 2131230765;

1 个答案:

答案 0 :(得分:1)

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

创建扩展程序

Extension需要一个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);
}