This discussion is archived
12 Replies Latest reply: Jul 24, 2012 3:33 AM by 943372 RSS

Text changed event for WebView or HTMLEditor

943372 Newbie
Currently Being Moderated
Hi,

is it possible to add a listener for the text content change for WebView or HTMLEditor? Is yes, how?

Regards
Oliver
  • 1. Re: Text changed event for WebView or HTMLEditor
    893762 Explorer
    Currently Being Moderated
    With WebView, you need to install a listener for "input" events on the content editable element. (You need a content editable element to have editable content in WebView.) Here is an example in pure Java without any JavaScript code:
    public class EditorInputEventTest extends Application {
    
        public static void main(String[] args) {
            launch(args);
        }
    
        @Override
        public void start(Stage primaryStage) {
            WebView webView = new WebView();
            VBox.setVgrow(webView, Priority.ALWAYS);
            WebEngine webEngine = webView.getEngine();
            webEngine.documentProperty().addListener(
                    new ChangeListener<Document>() {
                        @Override
                        public void changed(ObservableValue<? extends Document> ov,
                                            Document oldValue, Document newValue)
                        {
                            if (newValue != null) {
                                installListener(newValue);
                            }
                        }
                    });
            webEngine.loadContent(
                    "<html>"
                    + "<body>"
                    + "<div id='editor' contenteditable='true' style='width:640px; height:480px;'>"
                    + "    Type your text here"
                    + "</div>"
                    + "</body>"
                    + "</html>");
    
            VBox root = new VBox();
            root.getChildren().addAll(webView);
    
            primaryStage.setScene(new Scene(root));
            primaryStage.sizeToScene();
            primaryStage.show();
        }
    
        private static void installListener(Document document) {
            EventTarget editor = (EventTarget) document.getElementById("editor");
            editor.addEventListener("input", new MyEventListener(), true);
        }
    
        private static class MyEventListener implements EventListener {
            @Override
            public void handleEvent(Event event) {
                System.out.println("Event received: " + event.getType());
            }
        }
    }
    In JavaScript, it is even simpler, but if you want to deliver events to the Java side, you will need to explicitly call Java back via JavaScript-to-Java bridge.

    I'll defer it to HTMLEditor folks to comment on if and how this can be done with HTMLEditor.

    Edited by: Vasiliy Baranov on Jul 23, 2012 6:32 AM

    Edited by: Vasiliy Baranov on Jul 23, 2012 6:33 AM

    Edited by: Vasiliy Baranov on Jul 23, 2012 6:34 AM
  • 2. Re: Text changed event for WebView or HTMLEditor
    943372 Newbie
    Currently Being Moderated
    EventTarget editor = (EventTarget) newValue.getElementById("editor");

    editor is always null. Is "editor" an internal id of the WebView? Tried the css id and the fx:id without success. Quite hard this "double" listener.
  • 3. Re: Text changed event for WebView or HTMLEditor
    893762 Explorer
    Currently Being Moderated
    "editor" is the ID of the HTML element created with the following line:
      <div id='editor' contenteditable='true' style='width:640px; height:480px;'>
    Can you please post your code and JavaFX version?

    Edited by: Vasiliy Baranov on Jul 23, 2012 7:40 AM
  • 4. Re: Text changed event for WebView or HTMLEditor
    943372 Newbie
    Currently Being Moderated
    I am using fx 2.2 dev. preview b17
    webView.getEngine().documentProperty().addListener(new ChangeListener<Document>() {
                   @Override
                   public void changed(ObservableValue<? extends Document> observable, Document oldValue,
                             final Document newValue) {
    
                        EventListener el = new EventListener() {
                             @Override
                             public void handleEvent(Event evt) {
                                  System.out.println(newValue.getTextContent());
    
                             }
                        };
    
                        EventTarget editor = (EventTarget) newValue.getElementById("editor");
                        if (editor != null) {
                             editor.addEventListener("input", el, true);
                        }
    
                   }
              });
  • 5. Re: Text changed event for WebView or HTMLEditor
    893762 Explorer
    Currently Being Moderated
    Please also show the HTML content you load into WebView or, preferably, the complete source code of your test application.

    Edited by: Vasiliy Baranov on Jul 23, 2012 7:54 AM
  • 6. Re: Text changed event for WebView or HTMLEditor
    943372 Newbie
    Currently Being Moderated
    This is the html:
    String content = "<html><head>" + "</head><body contenteditable='true'>"
                        + "Normal <font color=red>Your Bold Red Text</font> "
                        + "<span class='text-custom-background'>Background</span>" + "</body></html>";
         
    webView.getEngine().loadContent(content);
    This is quite all. It is only a prototype.
  • 7. Re: Text changed event for WebView or HTMLEditor
    943372 Newbie
    Currently Being Moderated
    Do not know why, but the are some ' substituted by ".

    The line is: {code}<span class='text-custom-background'>Background</span>{code}

    Edited by: opfl on 24.07.2012 00:35
  • 8. Re: Text changed event for WebView or HTMLEditor
    893762 Explorer
    Currently Being Moderated
    opfl wrote:
    Do not know why, but the are some ' substituted by ".
    Yes, I know.
  • 9. Re: Text changed event for WebView or HTMLEditor
    893762 Explorer
    Currently Being Moderated
    opfl wrote:
    String content = "<html><head>" + "</head><body contenteditable='true'>"
                        + "Normal <font color=red>Your Bold Red Text</font> "
                        + "<span class='text-custom-background'>Background</span>" + "</body></html>";
    To be clear, for Document.getElementById to return something other than null, the document must contain an element with the same ID that you pass to Document.getElementById. In my example above, the ID is "editor". I see you want the entire body to be editable, so you need to assign the "editor" ID to the body element for Document.getElementById("editor") to return that element. Try this:
            String content = "<html><head></head><body id='editor' contenteditable='true'>"
                    + "Normal <font color='red'>Your Bold Red Text</font> "
                    + "<span class='text-custom-background'>Background</span>" + "</body></html>";        
  • 10. Re: Text changed event for WebView or HTMLEditor
    943372 Newbie
    Currently Being Moderated
    Ok the listener stuff is working now...thanks. But how to determine the content of the WebView?
  • 11. Re: Text changed event for WebView or HTMLEditor
    893762 Explorer
    Currently Being Moderated
    The content of the body element:
    System.out.println(webEngine.executeScript("document.body.innerHTML"));
    The content of the entire document (without <html> tag):
    System.out.println(webEngine.executeScript("document.documentElement.innerHTML"));
    Edited by: Vasiliy Baranov on Jul 24, 2012 2:58 AM
  • 12. Re: Text changed event for WebView or HTMLEditor
    943372 Newbie
    Currently Being Moderated
    Works. Thank you very much.

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points