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);
}