12 Replies Latest reply: Jul 24, 2012 5:33 AM by 943372 RSS

    Text changed event for WebView or HTMLEditor

    943372
      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
          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
            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
              "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
                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
                  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
                    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
                      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
                        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
                          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
                            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
                              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
                                Works. Thank you very much.