Undefined function error in JavaFX application
It was required to include the JSON editor in the javafx application. I tried to include the json editor (powered by Ace) https://github.com/josdejong/jsoneditor into my javafx app using webview. Everything works except copy (CTRL + C) and paste (CTRL + V).
After researching, I found out that the javafx website has safari . But I tried the same editor in web browsers like firefox, chrome and all. Even in the latest version of safari it works well, but I was unable to get it to work in the javafx web browser. I am currently using the newest JDK (8), so with the latest javafx. Is there a way that I can get the copy shortcuts to work on my inline editor in javafx webview? Please, help.
source to share
ace.js uses the clipboard and it works fine in any regular browser, but inside the JavaFX web browser there is a problem. If you are looking for a function handleClipboardData
in ace.js, you can see that:
- The copy works internally, but when it tries
setData
, it fails. - Insert doesn't work because it
getData
doesn't work.
Finding a workaround I found this response associated with CodeMirror, which can be applied to ace.js.
Basically, you have to create a bridge in your JavaFX application (outside of the ace editor) to deal with copy and paste events. Something like that:
@Override
public void start(Stage primaryStage) {
webView=new WebView();
webEngine = webView.getEngine();
webEngine.load(Utils.class.getResource("editor.html").toExternalForm());
// Capture Ctrl+V event and process it
webView.addEventHandler(KeyEvent.KEY_PRESSED, keyEvent -> {
if (keyEvent.isControlDown() && keyEvent.getCode() == KeyCode.V){
// PASTE
final Clipboard clipboard = Clipboard.getSystemClipboard();
String content = (String) clipboard.getContent(DataFormat.PLAIN_TEXT);
webEngine.executeScript(" pasteContent(\""+content+"\") ");
}
});
// retrieve copy event via javascript:alert
webEngine.setOnAlert((WebEvent<String> we) -> {
if(we.getData()!=null && we.getData().startsWith("copy: ")){
// COPY
final Clipboard clipboard = Clipboard.getSystemClipboard();
final ClipboardContent content = new ClipboardContent();
content.putString(we.getData().substring(6));
clipboard.setContent(content);
}
});
}
Now in editor.html you need to create a function pasteContent
that will be called from the webEngine on the insert event:
<script>
var editor = ace.edit("editor");
...
function pasteContent(content){
editor.onPaste(content);
}
</script>
And finally, in ace.js, in the function getCopyText
, next to line 13071, you need to insert an alert, so the copied text in the editor can be sent to the webEngine. Note the use of a hardline "copy: "
for simplicity.
this.getCopyText = function() {
var text = this.getSelectedText();
javascript:alert("copy: "+text);
this._signal("copy", text);
return text;
};
It's all.
source to share