Vaadin RichTextArea динамически прокручивает вниз

Question

У меня есть базовая RichTextArea из Vaadin, где я удалил панели инструментов.

Обычный 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, в который вы добавляете код прокрутки.

В этом примере для прокрутки используется идентификатор области расширенного текста.

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

Использовать расширение в пользовательском интерфейсе

Расширение может быть зарегистрировано один раз для объекта пользовательского интерфейса:

открытый класс MyUI extends UI { private ScrollRichTextAreaExtension extension;

@Override
protected void init(VaadinRequest vaadinRequest) {
    extension = new ScrollRichTextAreaExtension(this);
    setContent(createContent());
}

Наконец, вы можете прокрутить до конца мой вызывающий метод расширения. Это вызовет JavaScript в браузере, и это код JavaScript, который фактически перемещает позицию прокрутки.

private void onScrollButtonClick(ClickEvent clickEvent) {
    extension.scrollToBottom(richTextArea);
}