JavaFX应用程序中的函数未定义错误 [英] Function Undefined error in JavaFX application

问题描述

要求是将JSON编辑器嵌入到javafx应用程序中.我尝试将json编辑器(由Ace支持)嵌入 https://github.com/josdejong/jsoneditor 我的javafx应用程序在webview的帮助下.除了复制(CTRL + C)和粘贴(CTRL + V)外，其他所有东西都可以使用.

经过研究，我知道javafx Webkit是 safari 的.但是我在诸如Firefox，chrome等所有网络浏览器中尝试了相同的编辑器.即使在最新版本的safari中，它也能很好地工作，但是我无法使其在javafx webview中工作. 目前，我正在使用最新的JDK(8)，因此也要使用最新的javafx. 有什么方法可以使复制粘贴快捷键在javafx webview的嵌入式编辑器中正常工作? 请帮忙.

解决方案

ace.js使用剪贴板，并且在任何常规浏览器中都可以正常工作，但是在JavaFX webView中存在问题.如果您在ace.js中寻找功能handleClipboardData，您会看到:

• 复制在内部起作用，但是在尝试执行setData时会失败.
• 粘贴失败，因为getData失败.

寻找解决方法，我找到了这个 answer 与codemirror有关，也可以应用于ace.js.

基本上，您必须在JavaFX应用程序中(在ace编辑器之外)架起一座桥来处理复制和粘贴事件.像这样:

 @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);    
        }
    });
}   

现在在editor.html中，您必须创建pasteContent函数，该函数将在粘贴事件中从webEngine调用:

<script>
var editor = ace.edit("editor");
...
function pasteContent(content){
    editor.onPaste(content);
}
</script> 

最后在ace.js中的函数getCopyText中，靠近第13071行，您必须插入警报，以便将编辑器中复制的文本发送到webEngine.为简单起见，请注意使用硬编码字符串"copy: ".

this.getCopyText = function() {
    var text = this.getSelectedText();
    javascript:alert("copy: "+text);
    this._signal("copy", text);
    return text;
};

就这些了.<​​/p>

The requirement was to embed a JSON editor in a javafx application. I tried embedding the json editor(powered by Ace) https://github.com/josdejong/jsoneditor into my javafx application with the help of webview. Everything is working except copy(CTRL+C) and paste(CTRL+V).

After a research, I came to know that javafx webkit is of safari. But I tried the same editor in web browsers like firefox, chrome and all. Even in latest version of safari it is working well, but I failed to get it working in javafx webview. Currently I am using the latest JDK(8), so having the latest javafx also. Is there any way by which I can get the copy paste shortcut keys to be working on my embedded editor in javafx webview? Please help.

解决方案

ace.js uses the clipboard, and in any regular browser it works fine, but inside a JavaFX webView, there's a problem. If you look for the function handleClipboardData in ace.js you can see that:

• Copy works internally, but when it tries to setData it fails.
• Paste doesn't work because getData fails.

Looking for a workaround I found this answer related to codemirror, that could be applied to ace.js as well.

Basically, you have to make a bridge in your JavaFX application (outside the ace editor) to deal with copy and paste events. Something like this:

 @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 have to create the pasteContent function that will be called from the webEngine on a paste event:

<script>
var editor = ace.edit("editor");
...
function pasteContent(content){
    editor.onPaste(content);
}
</script> 

And finally in ace.js, in the function getCopyText, close to line 13071, you have to insert the alert, so the copied text in the editor can be sent to the webEngine. Note the use of the hardcoded string "copy: ", for simplicity.

this.getCopyText = function() {
    var text = this.getSelectedText();
    javascript:alert("copy: "+text);
    this._signal("copy", text);
    return text;
};

This will be all.

这篇关于JavaFX应用程序中的函数未定义错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！