기능 JavaFX 응용 프로그램에서 정의되지 않은 오류

Question

요구 사항은 javafx 응용 프로그램에 JSON 편집기를 포함해야한다는 것입니다. 나는 webview의 도움으로 javafx 응용 프로그램에 json 편집기 (Ace로 구동) https://github.com/josdejong/jsoneditor을 포함 시키려고했습니다. 복사 (CTRL + C) 및 붙여 넣기 (CTRL + V)를 제외한 모든 기능이 작동합니다.

연구 후, 나는 javafx 웹킷이 사파리이라는 것을 알게되었다. 하지만 파이어 폭스, 크롬 및 모든 웹 브라우저에서 동일한 편집기를 사용해 보았습니다. Safari의 최신 버전에서도 제대로 작동하지만 javafx webview에서 작동하지 못했습니다. 현재 최신 JDK (8)를 사용하고 있으므로 최신 javafx도 사용하고 있습니다. JavaScript 붙여 넣기 바로 가기 키를 javafx webview에서 내 임베디드 편집기로 작업 할 수있는 방법이 있습니까? 도와주세요.

Answer 1

ace.js는 클립 보드를 사용하며 모든 일반 브라우저에서 제대로 작동하지만 JavaFX webView 내부에는 문제가 있습니다.

• 복사 내부적으로 작동하지만,이 setData하려고하면 실패합니다 : 당신이 ace.js에서 함수 handleClipboardData 찾는 경우에 당신은 그것을 볼 수 있습니다.
• getData이 실패하여 붙여 넣기가 작동하지 않습니다.

나는이 answer을 codemirror와 관련이 있으며 ace.js에도 적용 할 수있는 대안을 찾고 있습니다.

기본적으로 복사 및 붙여 넣기 이벤트를 처리하려면 JavaFX 응용 프로그램 (에이스 편집기 외부)에서 브리지를 만들어야합니다. 이런 식으로 뭔가 :

@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, 당신은 paste 이벤트에 webEngine에서 호출 될 pasteContent 기능을 만들 수 있습니다

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

이것은 모두입니다.