Towards an Integrated WYSIWYG JavaFX WebView

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?

Comments:

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.

Posted by Christian Michelsen on May 18, 2013 at 03:01 AM PDT #

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

Posted by guest on May 18, 2013 at 06:39 PM PDT #

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...

Posted by Jonathan Giles on May 18, 2013 at 08:54 PM PDT #

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!

Posted by Geertjan on May 19, 2013 at 12:58 AM PDT #

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.

Posted by guest on June 05, 2013 at 03:24 PM PDT #

Post a Comment:
  • HTML Syntax: NOT allowed
About

Geertjan Wielenga (@geertjanw) is a Principal Product Manager in the Oracle Developer Tools group living & working in Amsterdam. He is a Java technology enthusiast, evangelist, trainer, speaker, and writer. He blogs here daily.

The focus of this blog is mostly on NetBeans (a development tool primarily for Java programmers), with an occasional reference to NetBeans, and sometimes diverging to topics relating to NetBeans. And then there are days when NetBeans is mentioned, just for a change.

Search

Archives
« April 2014
SunMonTueWedThuFriSat
  
12
13
14
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today