Geertjan's Blog

  • June 11, 2013

JavaFX WebView & JavaFX HTMLEditor: A Tale of Two Cities

Geertjan Wielenga
Product Manager

Tough times in the world of Fosfor, the EPUB Open Toolbox. Turns out that while the JavaFX WebView has perfect rendering but no editing capabilities, the JavaFX HTMLEditor has perfect editing capabilities but crap rendering.

Exhibit one is right here, with the JavaFX HTMLEditor on the left and the JavaFX WebView on the right, rendering the same XHTML file:

As can be seen, the images, CSS, and entities defined in the XHTML file above are perfectly rendered in WebView, but not at all in the HTMLEditor. It seems to me that the HTMLEditor is meant for rendering text only, nothing else.

I then hacked my own HTMLEditor on top of the JavaFX HTMLEditor, which searches through all the text prior to rendering and uses the file protocol to locally locate images and CSS:


The result is as follows, i.e., I've fixed the images and CSS problem, but not the entities, yet:

In short, I'm going to try and create a set of service providers for a "fixHTMLEditorRendering" service which will pre-process images, CSS, and HTML entities prior to them being rendered in the JavaFX HTMLEditor. Then, when saving the file back to EPUB, I'm going to have to reverse the process.

Not ideal, but I think it's workable.

Issue: https://javafx-jira.kenai.com/browse/RT-30487

Join the discussion

Comments ( 4 )
  • TPC Thursday, June 20, 2013

    Thanks for sharing.

  • guest Friday, June 28, 2013

    Gaertjan, I think that it's better to keep only the JavaFX WebView - the rationale is that after many years of broken HTML rendering with pure-Java solutions, the only working approach has been to embed the WebKit. Thus I'd like to stick with it. A possible solution that I'm exploring (code probably in the weekend) is to integrate a JS editor, such as the Aloha Editor [1]. I've already tried it in the past, in other circumstances, and it looks good. Basically, it notifies document updates by REST calls, so the whole idea is to run an embedded web server (e.g. Jetty), preprocess the HTML document so the proper JS/CSS stuff for Aloha is integrated, then have the WebView to connect to the embedded webserver.

    [1] http://www.aloha-editor.org/

  • Fabrizio Giudici Tuesday, July 2, 2013

    For the record, I implemented the thing. Conceptually it works, but it seems that there are some WebView issues that break the character selection in the editor.

  • Geertjan Tuesday, July 2, 2013

    Would love to see it. The problems described in this blog entry are a blocker to a really cool app I've been working on.

Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.