Vaadin RichTextArea 동적으로 맨 아래로 스크롤

Question

나는 도구 모음을 제거한 Vaadin의 기본 RichTextArea를 가지고 있습니다.

일반 TextArea에는 setCursorPosition 함수가 있지만 RichTextArea에는 없습니다.

왜 내가 TextArea를 사용하지 않는 HTML 서식이 필요합니다.

동적으로 맨 아래로 스크롤 할 수없는 경우 대신 사용해야하는 요소가 있습니까? 내가 만약 angel 7.7.10

을 사용하고

이 내가 요소를

textArea = new RichTextArea("Console"); 
textArea.addStyleName("no-toolbar-top"); 
textArea.addStyleName("no-toolbar-bottom"); 

Answer 1

당신은 JavaScriptExtension을 만들 수 있습니다를 만들고 삽입하는 방법입니다 서식있는 텍스트 영역의 아래로 스크롤됩니다.

확장을

확장을 만들기 당신이 당신의보기에서 전화를하고 코드를 스크롤 추가 할 자바 스크립트 파일을 선언 할 수 방법을 노출하는 자바 클래스를 필요로한다.

이 예에서는 서식있는 텍스트 영역의 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()); 
    } 
} 

src/main/resources 아래에 JavaScript 파일을 넣을 수 있습니다. 이 파일은 src/main/resource/com/mika/richtextarea/richtextarea-extension.js 경로에있을 수 있습니다.

Java 패키지와 클래스 이름은이 JavaScript 파일의 첫 번째 행에 있습니다. UI에서

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