Librería editor de markdown JavaScript y procesador de markdown para generar HTML con Java

Escrito por el 20/09/2019, actualizado el 20/09/2019.
java javascript planeta-codigo programacion
Enlace permanente Comentarios

JavaScript

Algunas aplicaciones permiten escribir contenido para posteriormente mostrarse en una página web. Permitir introducir directamente en texto en formato HTML es peligroso ya que puede causar problemas si no es correcto y ha de validarse para no permitir introducir archivos CSS, archivos JavaScript u otras etiquetas que supongan un problema de seguridad o desmaqueten la página web. Una alternativa es utilizar como entrada texto en formato markdown y posteriormente transformarlo a contenido en formato HTML.

Markdown es un formato de texto simple con una sintaxis que permite introducir títulos, negritas, itálica, listas y listas numeradas, enlaces o imágenes. El texto en formato markdown se puede transformar posteriormente a formato HTML. Hay múltiples librerías de JavaScript para crear un editor markdown con algunos botones para introducir las opciones básicas e incluso previsualizar el contenido.

Como editor JavaScript para markdown de las varias opciones que he encontrado la que más me ha gustado es Editor.md por sus numerosas opciones, documentación y ejemplos, aunque no tiene una versión reciente. Posee barra de herramientas para realizar opciones básicas de edición, previsualizador de contenido HTML, colapsador de secciones, manejadores de eventos, subir imágenes, internacionalización, personalizar la barra de herramientas como está descrito en su sección de ejemplos. En la página de Editor.md en GitHub están documentadas las opciones de configuración.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25


<html>
<head>
<link rel="stylesheet" href="resources/css/editormd.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="resources/js/editormd.min.js"></script>

<script type="text/javascript">
    $(function() {
        var editor = editormd("test-editor", {
            // width  : "100%",
            // height : "100%",
            path   : "resources/lib/"
        });
    });
</script>
</head>
<body>
    <div id="test-editor">
        <textarea style="display:none;">### Editor.md

**Editor.md**: The open source embeddable online markdown editor, based on CodeMirror & jQuery & Marked.
        </textarea>
    </div>
</body>    
</html>

index-1.html

Una vez que se obtiene el texto en formato markdown en algún momento al visualizarlo como parte del código fuente en una página web hay que transformarlo a formato HTML, para esto en Java hay varias librerías algunas ya obsoletas, antiguas y sin mantenimiento. De las que su desarrollo sigue activa una es Flexmark Java.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26


package com.vladsch.flexmark.samples;

import com.vladsch.flexmark.util.ast.Node;
import com.vladsch.flexmark.html.HtmlRenderer;
import com.vladsch.flexmark.parser.Parser;
import com.vladsch.flexmark.util.data.MutableDataSet;

public class BasicSample {
    public static void main(String[] args) {
        MutableDataSet options = new MutableDataSet();

        // uncomment to set optional extensions
        //options.set(Parser.EXTENSIONS, Arrays.asList(TablesExtension.create(), StrikethroughExtension.create()));

        // uncomment to convert soft-breaks to hard breaks
        //options.set(HtmlRenderer.SOFT_BREAK, "<br />\n");

        Parser parser = Parser.builder(options).build();
        HtmlRenderer renderer = HtmlRenderer.builder(options).build();

        // You can re-use parser and renderer instances
        Node document = parser.parse("This is *Sparta*");
        String html = renderer.render(document);  // "<p>This is <em>Sparta</em></p>\n"
        System.out.println(html);
    }
}

Main.java

1
2
3


dependencies {
    implementation "com.vladsch.flexmark:flexmark-all:0.50.40"
}

build.gradle

Referencia:

Librería editor de markdown JavaScript y procesador de markdown para generar HTML con Java

Ejemplo sencillo de como crear un documento PDF con Java y PDFBox

Utilizar credenciales de conexión a la base de datos generadas por Vault en una aplicación de Spring

Soporte para lanzar eventos desde JavaScript con Ajax en un componente de Apache Tapestry

Añadir botones selectores de opciones a select múltiple de bootstrap-select

Componente select múltiple en Apache Tapestry

Componente select de Apache Tapestry con funcionalidades adicionales usando bootstrap-select