CODEWITHSUNDEEP
user-interfacejavafx-2rich-text-editor
T-and-M Mike
T-and-M Mike

Reputation: 564

Automatically re-sizing the JavaFX 2 HTMLEditor control

I'm trying to make an editable control using the HTMLEditor ( I'd like a rich-text pane like Swing's JEditorPane or JTextPane but it seems I need to wait a couple of years for that ). I want to have the user type in text and the control grows to suit. I have tried catching an event when the scroll-bar appears and increasing the size until it disappears but I can't work out how to wait until the JavaFX thread has actually re-sized the control on its parent.

There's probably a better way to do it than that... any ideas? Any ideas how to reduce it if text is removed?

TIA Mike Watts

Upvotes: 1

Views: 714

Answers (2)

T-and-M Mike
T-and-M Mike

Reputation: 564

[side note: I've added this as an answer even though it is just the details from jewelsea's - I couldn't format the code when replying as a comment].

This is what has worked to a certain extent:

in the html of the WebView component, added a tag <div id='measured'> around all of the text blocks

added a handler to the WebView using setOnKeyPressed and that calls checkHeight()

private int lastOffsetHeight;


private void checkHeight() {
    int newHeight = (Integer)webview.getEngine().executeScript(
            "document.getElementById(\"measured\").offsetHeight;") + 14;

    if (newHeight != lastOffsetHeight) {
        lastOffsetHeight = newHeight;
         webview.setPrefHeight(newHeight);
    }
}

This is not too bad, main problem is that if all of the text is deleted then the WebView component deletes the div. As jewelsea mentioned, JQuery might be a better solution but I'll update this if I ever fix the problem of including the library ;-)

Upvotes: 0

jewelsea
jewelsea

Reputation: 159416

For the edit control, use a WebView with contenteditable set to true like this example or a customized HTMLEditor.

Interact with it using the Java/JavaScript bridge similar to this editor. You can script the WebView using JQuery. Run a Timeline which polls the edit control's text dimensions using a JQuery dimension query script and adjust the control size appropriately.

Upvotes: 1

Related Questions