Superscript and Subscript in javafx

Question

Can someone suggest a workaround to add Superscript and Subscript controls in the existing javafx HTML editor. I am trying to develop a Formula field editor having Bold, Italics, Superscript, Subscript and font selector as controls.

Answer 1

This isn't possible (AFAIK) without some pretty serious hacking, involving accessing parts of the API that are intended not to be accessed. The following more or less works; I based it on the source code for the HTMLEditorSkin. You may need to persuade your IDE to let you access the relevant packages. This is not particularly recommended, and it almost certainly will not work in Java 9.

import com.sun.javafx.webkit.Accessor;
import com.sun.webkit.WebPage;

import javafx.application.Application;
import javafx.application.Platform;
import javafx.event.Event;
import javafx.event.EventHandler;
import javafx.scene.Scene;
import javafx.scene.control.ToggleButton;
import javafx.scene.control.ToggleGroup;
import javafx.scene.control.ToolBar;
import javafx.scene.input.KeyEvent;
import javafx.scene.input.MouseEvent;
import javafx.scene.web.HTMLEditor;
import javafx.scene.web.WebView;
import javafx.stage.Stage;

public class HTMLEditorHack extends Application {

    @Override
    public void start(Stage primaryStage) {
        HTMLEditor editor = new HTMLEditor();
        Scene scene = new Scene(editor);
        editor.applyCss();
        editor.layout();

        WebView webView = (WebView) editor.lookup(".web-view");
        ToolBar toolbar = (ToolBar) editor.lookup(".bottom-toolbar");
        ToggleGroup toggleGroup = new ToggleGroup();

        createToggleButton("superscript", "Super", toggleGroup, webView, toolbar);
        createToggleButton("subscript", "Sub", toggleGroup, webView, toolbar);

        primaryStage.setScene(scene);
        primaryStage.show();
    }

    private void createToggleButton(String command, String label, ToggleGroup toggleGroup, WebView webView, ToolBar toolbar) {
        ToggleButton button = new ToggleButton(label);
        button.setFocusTraversable(false);
        button.selectedProperty().addListener((obs, wasSelected, isSelected) -> {
            WebPage page = Accessor.getPageFor(webView.getEngine());
            if (page.queryCommandState(command) != isSelected) {
                page.executeCommand(command, null);
            }
        });
        button.setToggleGroup(toggleGroup);
        toolbar.getItems().add(button);

        EventHandler<Event> updateState = e -> {
            Platform.runLater(() -> {
                WebPage page = Accessor.getPageFor(webView.getEngine());
                button.setDisable(! page.queryCommandEnabled(command));
                button.setSelected(page.queryCommandState(command));
            });
        };
        webView.addEventHandler(KeyEvent.ANY, updateState);
        webView.addEventHandler(MouseEvent.MOUSE_PRESSED, updateState);
        webView.addEventHandler(MouseEvent.MOUSE_RELEASED, updateState);
    }

    public static void main(String[] args) {
        launch(args);
    }
}

If you need a robust approach for creating an equation editor, I would probably consider building your own, instead of using/hacking HTMLEditor. There is a third party library, RichTextFX that can be used to create an editable text area with varying styles. Start there and add your own controls for styling.