Skip to content

Instantly share code, notes, and snippets.

@miho
Forked from jewelsea/CodeEditor.java
Created July 21, 2012 13:19
Show Gist options
  • Save miho/3155810 to your computer and use it in GitHub Desktop.
Save miho/3155810 to your computer and use it in GitHub Desktop.
CodeMirror based code editor for JavaFX
import javafx.scene.layout.StackPane;
import javafx.scene.web.WebView;
/**
* A syntax highlighting code editor for JavaFX created by wrapping a
* CodeMirror code editor in a WebView.
*
* See http://codemirror.net for more information on using the codemirror editor.
*/
public class CodeEditor extends StackPane {
/** a webview used to encapsulate the CodeMirror JavaScript. */
final WebView webview = new WebView();
/** a snapshot of the code to be edited kept for easy initilization and reversion of editable code. */
private String editingCode;
/**
* a template for editing code - this can be changed to any template derived from the
* supported modes at http://codemirror.net to allow syntax highlighted editing of
* a wide variety of languages.
*/
private final String editingTemplate =
"<!doctype html>" +
"<html>" +
"<head>" +
" <link rel=\"stylesheet\" href=\"http://codemirror.net/lib/codemirror.css\">" +
" <script src=\"http://codemirror.net/lib/codemirror.js\"></script>" +
" <script src=\"http://codemirror.net/mode/clike/clike.js\"></script>" +
"</head>" +
"<body>" +
"<form><textarea id=\"code\" name=\"code\">\n" +
"${code}" +
"</textarea></form>" +
"<script>" +
" var editor = CodeMirror.fromTextArea(document.getElementById(\"code\"), {" +
" lineNumbers: true," +
" matchBrackets: true," +
" mode: \"text/x-java\"" +
" });" +
"</script>" +
"</body>" +
"</html>";
/** applies the editing template to the editing code to create the html+javascript source for a code editor. */
private String applyEditingTemplate() {
return editingTemplate.replace("${code}", editingCode);
}
/** sets the current code in the editor and creates an editing snapshot of the code which can be reverted to. */
public void setCode(String newCode) {
this.editingCode = newCode;
webview.getEngine().loadContent(applyEditingTemplate());
}
/** returns the current code in the editor and updates an editing snapshot of the code which can be reverted to. */
public String getCodeAndSnapshot() {
this.editingCode = (String ) webview.getEngine().executeScript("editor.getValue();");
return editingCode;
}
/** revert edits of the code to the last edit snapshot taken. */
public void revertEdits() {
setCode(editingCode);
}
/**
* Create a new code editor.
* @param editingCode the initial code to be edited in the code editor.
*/
CodeEditor(String editingCode) {
this.editingCode = editingCode;
webview.setPrefSize(650, 325);
webview.setMinSize(650, 325);
webview.getEngine().loadContent(applyEditingTemplate());
this.getChildren().add(webview);
}
}
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.layout.HBoxBuilder;
import javafx.scene.layout.VBox;
import javafx.scene.layout.VBoxBuilder;
import javafx.stage.Stage;
/**
* An example application which demonstrates use of a
* CodeMirror based JavaScript CodeEditor wrapped in
* a JavaFX WebView.
*/
public class CodeEditorExample extends Application {
// some sample code to be edited.
static final private String editingCode =
"import javafx.application.Application;\n" +
"import javafx.scene.Scene;\n" +
"import javafx.scene.web.WebView;\n" +
"import javafx.stage.Stage;\n" +
"\n" +
"/** Sample code editing application wrapping an editor in a WebView. */\n" +
"public class CodeEditorExample extends Application {\n" +
" public static void main(String[] args) { launch(args); }\n" +
" @Override public void start(Stage stage) throws Exception {\n" +
" WebView webView = new WebView();\n" +
" webView.getEngine().load(\"http://codemirror.net/mode/groovy/index.html\");\n" +
" final Scene scene = new Scene(webView);\n" +
" webView.prefWidthProperty().bind(scene.widthProperty());\n" +
" webView.prefHeightProperty().bind(scene.heightProperty());\n" +
" stage.setScene(scene);\n" +
" stage.show();\n" +
" }\n" +
"}";
public static void main(String[] args) { launch(args); }
@Override public void start(Stage stage) throws Exception {
// create the editing controls.
Label title = new Label("Editing: CodeEditor.java");
title.setStyle("-fx-font-size: 20;");
final Label labeledCode = new Label(editingCode);
final CodeEditor editor = new CodeEditor(editingCode);
final Button revertEdits = new Button("Revert edits");
revertEdits.setOnAction(new EventHandler<ActionEvent>() {
@Override public void handle(ActionEvent actionEvent) {
editor.revertEdits();
}
});
final Button copyCode = new Button(
"Take a snapshot from the editor and set a revert point"
);
copyCode.setOnAction(new EventHandler<ActionEvent>() {
@Override public void handle(ActionEvent actionEvent) {
labeledCode.setText(editor.getCodeAndSnapshot());
System.out.println(editor.getCodeAndSnapshot());
}
});
// layout the scene.
final VBox layout = VBoxBuilder.create().spacing(10).children(
title,
editor,
HBoxBuilder.create().spacing(10).children(copyCode, revertEdits).build(),
labeledCode
).build();
layout.setStyle("-fx-background-color: cornsilk; -fx-padding: 10;");
// display the scene.
final Scene scene = new Scene(layout);
stage.setScene(scene);
stage.show();
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment