Geertjan's Blog

Towards an Integrated WYSIWYG JavaFX WebView

Geertjan Wielenga
Product Manager

Last week I blogged about the free and open source EPUB Open Toolbox which I am creating for publishers and authors. Officially, it is now known as Fosfor, since it is initially being developed for the Fosfor Uitgeverij, that is, an on-line e-book publisher based in Amsterdam, as a replacement for Sigil. And this is yet another example of how the web and mobile worlds need the desktop—just for fun you should ask a publisher or author some time: "Do you ever see yourself editing and managing books on your mobile phone?"

At the time, when I started working on this, I was using the SHEF framework as the basis of a WYSIWYG editor. That had its shortcomings and I couldn't help thinking that the JavaFX WebView would be a more natural fit.

So, here we are a week later, with the JavaFX WebView doing a superb job rendering the XHTML pages of EPUB projects:

It simply looks awesome. No credit whatsoever for me on that score, since I'm simply reusing the JavaFX WebView, the creation of which I had nothing to do with. Images are rendered, which wasn't the case with SHEF, the performance is great, and the whole thing just looks professional, like a commercial off the shelf product that took years to develop, rather than days. Aside from the rendering, there's a lot of functionality built into the JavaFX WebView, e.g., when you right-click on an image, you get popup menus for opening the image in a new view, when you right-click on a URL, you can open the URL in a new view, etc.

But, I don't want a web browser. I want a WYSIWYG editor. The start is clearly there, i.e., there's a JavaFX toolbar containing JavaFX buttons, each of which will be, once the prototyping phase is over, provided by different NetBeans modules. For example, here's the color chooser in action—select a piece of text, invoke the color chooser, select a color, and immediately the font of the selected text is changed to the selected color:

Still many things to do. Especially, synchronizing changes back into the source file. Once that's done, all the rest should be relatively painless. Not possible, right now, to type in the WebView, but I have a pretty good idea how to solve that. My insight on this is that there's no difference between adding characters and adding colors to selected text. And it's also possible to get hold of the cursor in the JavaFX WebView, so the basics for typing are already included in the app. With that solved, its all about adding more tools, e.g., a bold tool, italics tool, font size, and so on.

I've shared the above pics with Sean Phillips who works on NASA software (he's been mentioned in this blog several times, has a lot of JavaFX/NetBeans Platform articles on NetBeans Zone, and hopefully will be at JavaOne this year) and he responded pretty positively from his perspective at NASA:

Based on what you have said and the limited images I've seen, this could be used as a technical document markup tool. Several of the Ground System missions I am associated with have home brew tools that generate documentation. Office tools like MS Word and the like can't really be used because a significant portion of the documentation is based around data produced by custom mission specific software systems. As a result, someone ends up writing code that generates Latex or HTML as a custom one off. I wonder if there could be a future in a tool like what you are developing that could be used towards a goal like what I have just described.

Part of my reason for blogging about this is to ask—are there developers out there who have tools written in JavaFX (or who would like to start doing so) that are relevant to the above and could be contributed to the free and open source Fosfor project?

Join the discussion

Comments ( 5 )
  • Christian Michelsen Saturday, May 18, 2013

    I was actually looking at using the WebView to create an HTML WYSIWYG editor just last night, however my approach was to utilize an all ready existing JavaScript editor like CKEditor or TinyMCE. Kinda like we can do with DjNativeSwing.

    JavaScript, of course, has certain drawbacks inside of a Java application, but for basic html stuff it should work just fine.

    I'm not that well versed in JavaFX or writing this kind of tools in general, but I'd sure like to give it a go to get something usable in regards to an HTML Editor without requiring SWT.

  • guest Sunday, May 19, 2013

    That's great, but how about javafx.scene.web.HTMLEditor ?

  • Jonathan Giles Sunday, May 19, 2013

    Have you looked at the prebuilt JavaFX ui control called HTMLEditor? It uses WebView under the covers to provide a rich editor for end users. Even if the control doesn't meet your needs, I think the source for it is available for you to see how it is done...

  • Geertjan Sunday, May 19, 2013

    Hi guest and Jonathan, yes, that's what I'm working on, reusing HTMLEditor as much as possible. Let's see how well it meets requirements, but so far, so good!

  • guest Wednesday, June 5, 2013

    I've been watching for a good Java desktop WYSIWYG editor for a while, so this post and the previous one really caught my interest.

    Is this switch from SHEF the reason the Fosfor jepub-browser is failing to build, or is that just me? I'm new to all this but it seems that net.atlanticbb.tantlinger.shef-1.jar is missing.

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