Automatically re-sizing the JavaFX 2 HTMLEditor control

Question

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

score 1 · Accepted Answer · edited May 23 '17 at 12:12

1

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.

edited May 23 '17 at 12:12

Community

1
1

answered Nov 21 '12 at 09:27

jewelsea

150,031
14
366
406

Thanks for that - yes I had considered that as an option but as you probably appreciate it is rather tortuous ( creating JavaScript written from Java which, if using JQuery, needs to link to an external library ) and therefore time-consuming to test and difficult to implement smoothly. I was hoping to code it in good ol' Java... – T-and-M Mike Nov 22 '12 at 11:18
I've set this as the accepted answer 'cos it does seem to be the only sensible so thanks again for the answer. Problem ( as I suspected ) is trying to link to JQuery - I've opened another question for that! – T-and-M Mike Nov 28 '12 at 19:38

T-and-M Mike · Answer 2 · 2012-11-28T23:23:04.393

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

Tried this using jQuery's height() function: doesn't work as well as that shown above ( operation is a bit unpredictable form first glance ). What's more it's a pain to get the jQuery in there: I ended up putting the jquery.js in the [java] sources directory; using `getClass().getResourceAsStream("jquery.js")` to read the file into a string, then when setting the html on the webiew, wrote that string in as the script ( instead of using the `src` attribute ). — T-and-M Mike, Nov 28 '12 at 23:17

Automatically re-sizing the JavaFX 2 HTMLEditor control

2 Answers2