Quantcast
Channel: Planeta Código
Viewing all articles
Browse latest Browse all 2699

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

$
0
0
JavaScript
Java

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><linkrel="stylesheet"href="resources/css/editormd.css"/><scripttype="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><scripttype="text/javascript"src="resources/js/editormd.min.js"></script><scripttype="text/javascript">$(function(){vareditor=editormd("test-editor",{// width : "100%",
// height : "100%",
path:"resources/lib/"});});</script></head><body><divid="test-editor"><textareastyle="display:none;">### Editor.md
**Editor.md**: The open source embeddable online markdown editor, based on CodeMirror & jQuery & Marked.
</textarea></div></body></html>
Editor JavaScript de markdown

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
packagecom.vladsch.flexmark.samples;importcom.vladsch.flexmark.util.ast.Node;importcom.vladsch.flexmark.html.HtmlRenderer;importcom.vladsch.flexmark.parser.Parser;importcom.vladsch.flexmark.util.data.MutableDataSet;publicclassBasicSample{publicstaticvoidmain(String[]args){MutableDataSetoptions=newMutableDataSet();// 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");
Parserparser=Parser.builder(options).build();HtmlRendererrenderer=HtmlRenderer.builder(options).build();// You can re-use parser and renderer instances
Nodedocument=parser.parse("This is *Sparta*");Stringhtml=renderer.render(document);// "<p>This is <em>Sparta</em></p>\n"System.out.println(html);}}
1
2
3
dependencies{implementation"com.vladsch.flexmark:flexmark-all:0.50.40"}

Viewing all articles
Browse latest Browse all 2699