X

Geertjan's Blog

Thanks JavaFX: WYSIWYG HTML Editor for NetBeans IDE

Geertjan Wielenga
Product Manager
In this very short screencast (a mere 44 seconds), you see one of my personal holy grails has come along quite far. It shows an initial implementation of integration between the JavaFX HTMLEditor component and the NetBeans IDE HTML Source Editor. Two way editing, synchronized between the two views (visual and source) is successfully demonstrated.



https://www.youtube.com/watch?v=BLkuQFUaI9A

However, rather than rewriting the entire source file when a change is made in the JavaFX HTMLEditor, which is what currently happens, and which explains the slight delay when switching to the source view, it would be better if only the change were to be written into the file. That's the next step in this integration and probably the most challenging one.

The key pieces of this solution, following on from my blog entry from yesterday, where "obj" is the FileObject that the MultiViewElement is viewing to the user:

@Override
public void componentDeactivated() {
FileLock fileLock = null;
OutputStreamWriter osw;
try {
fileLock = obj.lock();
OutputStream fout = obj.getOutputStream(fileLock);
OutputStream bout = new BufferedOutputStream(fout);
osw = new OutputStreamWriter(bout, "UTF-8");
osw.write(htmlEditor.getHtmlText());
osw.flush();
osw.close();
} catch (IOException ex) {
} finally {
if (fileLock != null) {
fileLock.releaseLock();
}
}
}

The above writes the current content of the JavaFX HTMLEditor into the file when the user switches to the source view.

In addition, I have implemented org.openide.filesystems.FileChangeListener on the MultiViewElement, with this implementation of fileChanged:

@Override
public void fileChanged(final FileEvent fe) {
Platform.runLater(new Runnable() {
@Override
public void run() {
try {
htmlEditor.setHtmlText(fe.getFile().asText());
} catch (IOException ex) {
}
}
});
}

Join the discussion

Comments ( 2 )
  • guest Saturday, September 20, 2014

    Can you make this WYSIWYG editor available as a plugin for Netbeans? I am not good enough at code to follow how you built it. A WYSIWYG editor would make it easier for me to add content after I have built the page. Thank you.


  • Lasse Monday, December 29, 2014

    Using it in Netbeans, one big problem when using Danish charters æøå it goes nutts. When I switch between design and source, strange charters is appearing, and they are increasing every time I switch. Just because of the Danish charters.


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