<AI>
JavaFXの WebView に Monaco Editor を読み込むには、
ローカルにダウンロードしたエディタの静的ファイル(HTML/JS)を WebView の loadContent または load メソッドで読み込みます。
CDN経由の読み込みは WebView の古いブラウザエンジンでエラーになることがあるため、ローカルへの配置が推奨されます。
1. Monaco Editor ファイルの準備
公式の Monaco Editor Releases から最新のソースコード(monaco-editor-x.x.x.zip)をダウンロードし、
プロジェクトのディレクトリ(例: src/main/resources/monaco/)に展開します。
2. ローダー HTML の作成
Monaco Editor を読み込んで初期化するためのHTMLファイル(index.html)を同じディレクトリに作成します。
html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Monaco Editor</title>
<script src="min/vs/loader.js"></script>
<style>
body { margin: 0; padding: 0; width: 100%; height: 100vh; overflow: hidden; }
#container { width: 100%; height: 100%; }
</style>
</head>
<body>
<div id="container"></div>
<script>
require.config({ paths: { 'vs': 'min/vs' }});
require(['vs/editor/editor.main'], function() {
// エディタの初期化
window.editor = monaco.editor.create(document.getElementById('container'), {
value: 'function hello() {\n\tconsole.log("Hello World!");\n}',
language: 'javascript',
theme: 'vs-dark' // または 'vs'
});
});
// Javaからエディタのテキストを取得するための関数
function getEditorText() {
return window.editor.getValue();
}
</script>
</body>
</html>
3. JavaFX側での読み込み
JavaFXの WebView に作成した HTML ファイルを読み込ませます。
java
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.VBox;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;
import javafx.stage.Stage;
import java.net.URL;
public class MonacoEditorApp extends Application {
@Override
public void start(Stage primaryStage) {
WebView webView = new WebView();
WebEngine webEngine = webView.getEngine();
// JavaScript の実行を許可
webEngine.setJavaScriptEnabled(true);
// 作成した index.html のパスを指定
URL url = getClass().getResource("/monaco/index.html");
if (url != null) {
webEngine.load(url.toExternalForm());
}
VBox root = new VBox(webView);
Scene scene = new Scene(root, 800, 600);
primaryStage.setTitle("JavaFX Monaco Editor");
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
Java と JavaScript の連携(おまけ)
Java側からエディタのテキストを読み取るには executeScript を使用します。
java
String code = (String) webEngine.executeScript("getEditorText();");
System.out.println(code);
注意: WebView の古いバージョン(特に JavaFX 11 以前や、コンパイル設定によっては JavaFX 17以降でも)で
Monaco Editor の一部機能(ES6のシンタックスなど)が動作しない場合があります。
その際は、よりモダンなレンダリングエンジンを統合するか、JavaFX WebView との通信を考慮してエディタのバージョンを調整してください