Coder Social home page Coder Social logo

richtextfx's Introduction

RichTextFX

RichTextFX provides a text area for JavaFX with API to style ranges of text. It is intended as a base for rich-text editors and code editors with syntax highlighting.

Who uses RichTextFX?

Kappa IDE
Squirrel SQL client (its JavaFX version)
mqtt-spy
Alt.Text
Xanthic
Arduino Harp
Markdown Writer FX
OmniEditor, which is then used by Chronos IDE

If you use RichTextFX in an interesting project, I would like to know!

Features

  • Assign arbitrary styles to arbitrary ranges of text.
  • Display line numbers or, more generally, any graphic in front of each paragraph. Can be used to show breakpoint toggles on each line of code.
  • Positioning a popup window relative to the caret or selection. Useful e.g. to position an autocompletion box.
  • Getting the character index under the mouse when the mouse stays still over the text for a specified period of time. Useful for displaying tooltips depending on the word under the mouse.

Flavors

StyleClassedTextArea

StyleClassedTextArea lets you assign style classes to ranges of text. You can define the style classes in your stylesheet.

Example.java:

area.setStyleClass(from, to, "red");

example.css:

.red { -fx-fill: red; }

This renders the text in the range [from, to) in red.

Note that the style classes are assigned to instances of Text, so you can specify any CSS properties applicable to a Text node.

CodeArea

CodeArea is a variant of StyleClassedTextArea that uses a fixed width font by default, making it a convenient base for source code editors. CodeArea is used in the Java Keywords demo below.

InlineCssTextArea

InlineCssTextArea lets you specify inline CSS for a range of text.

area.setStyle(from, to, "-fx-font-weight: bold;");

Again, you can use any CSS properties applicable to a Text node.

InlineStyleTextArea

InlineStyleTextArea<S> is a more general version of InlineCssTextArea. In the end, there is still inline CSS assigned to Text nodes, but instead of using the CSS string directly, you use an instance of your custom style representation S and provide a way (function) to convert S to CSS string in InlineStyleTextArea constructor.

class MyStyleInfo {
    boolean bold;
    boolean italic;
    
    String toCss() {
        return "-fx-font-weight: " + (bold ? "bold" : "normal") + ";"
               + "-fx-font-style: " + (italic ? "italic" : "normal") + ";";
    }
}

InlineStyleTextArea<MyStyleInfo> area =
        new InlineStyleTextArea<>(new MyStyleInfo(), styleInfo -> styleInfo.toCss());

The first constructor argument is the default style to use for ranges of text where you don't set the style explicitly. The second constructor argument is the function to convert the custom style representation to CSS.

You then assign an instance of your custom style representation to a range of text.

MyStyleInfo styleInfo = ...;

area.setStyle(from, to, styleInfo);

You appreciate the benefits of this approach over InlineCssTextArea when you need to query the style used at a given position in text - you get back an instance of your style representation instead of a CSS string.

MyStyleInfo styleInfo = area.getStyleAt(charIndex);

InlineStyleTextArea is used in the Rich-text demo below.

Requirements

JDK8 is required, because TextFlow, introduced in JavaFX 8.0, is used to render each line. Also, there's a heavy use of lambdas, defender methods and the stream API in the code base.

JDK 8u40 is recommended, because it fixes some text rendering bugs.

Demos

Automatic highlighting of Java keywords

Screenshot of the JavaKeywords demo

Run using the pre-built JAR

Download the pre-built "fat" JAR file and run

java -cp richtextfx-demos-fat-0.6.10.jar org.fxmisc.richtext.demo.JavaKeywords

or

java -cp richtextfx-demos-fat-0.6.10.jar org.fxmisc.richtext.demo.JavaKeywordsAsync

Run from the source repo

gradle JavaKeywords

or

gradle JavaKeywordsAsync

Source code

JavaKeywords.java

JavaKeywordsAsync.java

The former computes highlighting on the JavaFX application thread, while the latter computes highlighting on a background thread.

XML Editor

Similar to the Java Keywords demo above, this demo highlights XML syntax. Courtesy of @cemartins.

Run using the pre-built JAR

Download the pre-built "fat" JAR file and run

java -cp richtextfx-demos-fat-0.6.10.jar org.fxmisc.richtext.demo.XMLEditor

Run from the source repo

gradle XMLEditor

Source code

XMLEditor.java

Rich-text editor

Screenshot of the RichText demo

Run using the pre-built JAR

Download the pre-built "fat" JAR file and run

java -cp richtextfx-demos-fat-0.6.10.jar org.fxmisc.richtext.demo.richtext.RichText

Run from the source repo

gradle RichText

Source code

RichText.java

Custom tooltips

When the mouse pauses over the text area, you can get index of the character under the mouse. This allows you to implement, for example, custom tooltips whose content depends on the text under the mouse.

Screenshot of the RichText demo

Run using the pre-built JAR

Download the pre-built "fat" JAR file and run

java -cp richtextfx-demos-fat-0.6.10.jar org.fxmisc.richtext.demo.TooltipDemo

Run from the source repo

gradle TooltipDemo

Source code

TooltipDemo.java

Download

Stable release

Current stable release is 0.6.10.

Maven coordinates

Group ID Artifact ID Version
org.fxmisc.richtext richtextfx 0.6.10

Gradle example

dependencies {
    compile group: 'org.fxmisc.richtext', name: 'richtextfx', version: '0.6.10'
}

Sbt example

libraryDependencies += "org.fxmisc.richtext" % "richtextfx" % "0.6.10"

Manual download

Download the JAR file or the fat JAR file (including dependencies) and place it on your classpath.

Snapshot releases

Snapshot releases are deployed to Sonatype snapshot repository.

Maven coordinates

Group ID Artifact ID Version
org.fxmisc.richtext richtextfx 1.0.0-SNAPSHOT

Gradle example

repositories {
    maven {
        url 'https://oss.sonatype.org/content/repositories/snapshots/' 
    }
}

dependencies {
    compile group: 'org.fxmisc.richtext', name: 'richtextfx', version: '1.0.0-SNAPSHOT'
}

Sbt example

resolvers += "Sonatype OSS Snapshots" at "https://oss.sonatype.org/content/repositories/snapshots"

libraryDependencies += "org.fxmisc.richtext" % "richtextfx" % "1.0.0-SNAPSHOT"

License

Dual-licensed under BSD 2-Clause License and GPLv2 with the Classpath Exception.

How can I contribute?

There are many ways how you can contribute:

  • Report bugs.
  • Fix bugs ;)
  • Spread the word: write blog posts, tutorials, ...
  • Implement features. There are plenty of feature requests, for example support for paragraph-level styles (#6), placing arbitrary nodes in the text (#87), copy/paste including style information (#17), just to name a few.
  • Create a bounty for a feature.
  • Support the author.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.