Change substring color in JavaFX Text Area

Question

I need to change substring text from Text Area in JavaFX for example in text below static and void be red.

public static void main(String[] args) {

}

I don't know about CSS is there any simple code or tutorial?

possible duplicate of [Highlighting Strings in JavaFX TextArea](http://stackoverflow.com/questions/9128535/highlighting-strings-in-javafx-textarea) — jewelsea, Jun 02 '14 at 23:32

score 4 · Accepted Answer · answered Jun 03 '14 at 21:09

The TextArea does not support anything like rich text different formatting within one component. I would propose you look into directions of

TextFlow - see http://docs.oracle.com/javase/8/javafx/api/javafx/scene/text/TextFlow.html.
It is meant for static display of rich text, but it does not provide editing. The Oracle tutorial may be a viable starting point: http://docs.oracle.com/javase/8/javafx/user-interface-tutorial/text-settings.htm
WebView - see http://docs.oracle.com/javase/8/javafx/api/javafx/scene/web/WebView.html.
WebView can be used to display HTML content. There are several ways to utilize this. You may construct your formatted and colored text as HTML code and set it as WebView content - or you even load one of the popular JavaScript source code formatters/highlighters into the WebView component.

If you are about to create something like a java source code view in JavaFX, you might want to have a look on the 2nd approach. A short sketch (using the ACE Editor libraries, done for JavaScript syntax coloring) might look like this:

First, initialize the WebView with your HTML, here done in an FXML controller:

@Override
public void initialize(URL url, ResourceBundle rb) {

    WebEngine engine = this.webView.getEngine();
    engine.setJavaScriptEnabled(true);
    engine.setOnAlert(new EventHandler<WebEvent<String>>() {

      @Override
      public void handle(WebEvent<String> t) {
        String data = t.getData();
        System.out.println("alert: " + data);
        textArea.appendText(data);
      }
    });
    engine.load(this.getClass().getResource("content/basics-javascript.html").toExternalForm());
  }

Second part: content/basics-javascript.html contains an HTML page that loads the JavaScript libraries necessary for the formatting and highlighting:

<html>
  <head>
    <title>TODO supply a title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <style type="text/css" media="screen">
        #editor { 
            position: absolute;
            top: 30px;
            right: 5px;
            bottom: 5px;
            left: 5px;
            border: 1px solid #ccc;
            background-color: #eee;
        }
    </style>
  </head>
  <body>
    <div>ACE-Editor</div>
    <div id="editor">
    function foo(items) {
        var x = "All this is syntax highlighted";
        return x;      

    </div>
    <script type="text/javascript" src="js/libs/ace/ace.js" ></script>
    <script type="text/javascript">
      var editor = ace.edit('editor');

      editor.getSession().setMode("ace/mode/javascript");
    </script>
  </body>
</html>

Hope that helps!

I want to write simple IDE‌ for a Compiler project and I need simple text editor that support substring coloring. my project is in java. I want to use JavaFX in swing and write my compiler with java. is it a good approach‌? ? — Karo, Jun 03 '14 at 21:15
Yes, it is a good approach Karo. Upvote, mark correct and go forth and prosper. — jewelsea, Jun 03 '14 at 21:16

Change substring color in JavaFX Text Area

1 Answers1