HTMLEditor editar HTML en JavaFX

El control HTMLEditor de JavaFX nos permite crear y editar texto enriquecido, este texto se guarda en formato HTML, este control soporta la creación y edición de contenido HTML5, aunque la barra de herramientas no posee controles para todas las características del formato estas están soportadas, por ejemplo, no tenemos un botón para crear tablas, pero, si el documento HTML que estemos trabajando las contiene, podremos editarlas.

Para crear una instancia de este control usaremos la clase HTMLEditor que se localiza en el paquete javafx.scene.web, esta clase dispone de los métodos getHtmlText() y setHtmlText(String) para obtener y cambiar el texto formateado, también tenemos disponible el método print(PrinterJob) diseñado para imprimir el contenido del control.

public class JavaFXHTMLEditor extends Application {
    
    @Override
    public void start(Stage primaryStage) {
        
        HTMLEditor html = new HTMLEditor();
        
        TextArea text = new TextArea();
        text.setOnMouseClicked(mc -> text.setText(html.getHtmlText()));
        
        SplitPane spane = new SplitPane(html, text);
        spane.setOrientation(Orientation.VERTICAL);
 
        StackPane root = new StackPane();
        root.getChildren().add(spane);
        root.setPadding(new Insets(10.0));
        
        Scene scene = new Scene(root);
        
        primaryStage.setTitle("HTMLEditor JavaFX");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

He agregado un control TextArea para mostrar el texto HTML del control, este se actualiza al hacer clic sobre él, para detectar el clic del ratón usamos setOnMouseClick(...).

La barra de herramientas de este control nos permite:

• La barra de herramientas de este control nos permite:
• Copiar, cortar y pegar texto desde el portapapeles.
• Aplicar alineación y sangría al texto.
• Crear listas de diferentes estilos.
• Cambiar el color de texto y del fondo.
• Establecer la fuente, tamaño y estilo.
• Aplicar formato de cabeceras y párrafos.

Si deseamos modificar la apariencia del control HTMLEditor mediante CSS podemos hacerlo mediante las siguientes clases, en nombre de cada una de ellas nos dará una buena idea del control al que se le aplicará el estilo, por ejemplo, html-editor-copy lo usaremos para cambiar el estilo del botón copiar de la barra de herramientas.

Tenemos las siguientes clases CSS:

• html-editor-cut
• html-editor-copy
• html-editor-paste
• html-editor-align-left
• html-editor-align-center
• html-editor-align-right
• html-editor-align-justify
• html-editor-outdent
• html-editor-indent
• html-editor-bullets
• html-editor-numbers
• html-editor-bold
• html-editor-italic
• html-editor-underline
• html-editor-strike
• html-editor-hr

Si deseáramos cambiar el icono del botón copiar haríamos lo siguiente:

.html-editor-copy {
     -fx-graphic: url("editor_copy_icon.jpg");
}

Formatear texto HTML

Lo siguiente que veremos no tiene nada que ver con JavaFX, lo que haremos será formatear el texto HTML que se muestra en el control TextArea para que sea más legible, es creado un algoritmo bastante simple pero funcional, la idea es mostrar como se pueden hacer este tipo de aplicaciones usando expresiones regulares en Java.

El algoritmo utiliza las siguiente expresiones regulares <[_\\w][^>]*> para detectar la etiqueta HTML de inicio y </[_\\w][^>]*> para la etiqueta de cierre, al detectar una etiqueta de apertura añade un salto de línea más las tabulaciones acumuladas, cuando encuentre una etiqueta de cierre las tabulaciones se reducen.

public String formatHtml(String html) {
    
    Pattern pattern = Pattern.compile("(<[_\\w][^>]*>)|(</[_\\w][^>]*>)");
    Matcher matcher = pattern.matcher(html);

    StringBuilder stringBuilder = new StringBuilder(html);

    int position = 0;
    int start_offset = 0;

    while (matcher.find()) {
        String start = matcher.group(1);
        String end = matcher.group(2);

        String tab = "\t";
        String text = "\n";

        if (start != null || end != null) {

            if (start != null) {
                position += 1;
            }

            for (int i = 0; i < position; i++) {
                text += tab;
            }

            stringBuilder.insert(matcher.start() + start_offset, text);

            start_offset += text.length();

            if (end != null) {
                position -= 1;
            }
        }
    }

    return stringBuilder.toString();
}

Nos es perfecto, hay cosas que mejorar, cuando tenga tiempo lo haré, hasta la próxima.

Descargar código: JavaFX Control HTMLEditor.zip