¿Existe alguna buena biblioteca o control de Markdown Javascript? [cerrado]


89

Quiero crear un sitio donde el usuario pueda ingresar texto y formatearlo en Markdown. La razón por la que me gustaría una solución de Javascript es porque quiero mostrar una vista previa en vivo, como en StackOverflow.

Sin embargo, mi sitio no está dirigido a desarrolladores, por lo que un control de editor sería ideal.

Entiendo que en StackOverflow, se está utilizando el editor de WMD.

Una búsqueda rápida en Google también muestra la biblioteca Showdown, que creo que en realidad está siendo utilizada por WMD.

¿Hay más opciones? ¿Son ya excelentes herramientas WMD / Showdown? ¿Cuáles han sido sus experiencias con las diferentes opciones?

Respuestas:


33

Si no es reacio a usar Ajax para generar la vista previa en vivo, entonces otra opción es markItUp! . markItUp! es un editor de marcado universal y muy flexible. Proporciona una forma fácil de crear un editor de marcado, pero a diferencia de WMD, no proporciona su propia vista previa en vivo.

Usé markItUp !, junto con un JSP simple (usando MarkdownJ ) para uno de mis proyectos de código abierto (un complemento de Markdown para Roller ). Si está utilizando otra tecnología del lado del servidor, reemplace ese JSP simple según corresponda.

De hecho, comencé a usar esto antes de encontrarme con WMD. Estoy de acuerdo, WMD es genial, pero acaba de ser de código abierto y, en esta etapa, es más difícil personalizar el comportamiento de.


MarkItUp! no maneja la selección de alternancia y pegajosa. Este es mi editor de texto Markdown de código abierto basado en JavaScript. Admite atajos de teclado, cuadros de diálogo personalizados, caídas personalizadas y también admite una selección de texto inteligente ordenada para alentar a los usuarios a escribir sintaxis de Markdown en un buen formato: github.com/tovic/markdown-text-editor
Taufik Nurrohman

65

Estamos muy contentos con las armas de destrucción masiva. Sin embargo, hay algunos errores molestos. Nada importante, pero me encantaría que John Fraser (el autor) hiciera el código de código abierto para que podamos arreglar algunos de ellos. Prometió hacerlo, pero otros proyectos de la vida real se interponen en el camino.

Hago seguimiento con John todas las semanas. Publicaré en el blog una vez que la fuente de ADM esté finalmente disponible. No he podido contactar a John Fraser en más de un año.

Hemos abierto tanto la biblioteca de JavaScript Markdown

http://code.google.com/p/pagedown/

y la biblioteca Markdown de C # del lado del servidor

http://code.google.com/p/markdownsharp/


Gracias por la respuesta Jeff. Ni siquiera me di cuenta de que las armas de destrucción masiva no eran de código abierto ... Mantendré los ojos bien abiertos.
webmat

2
¿Qué hiciste con el enorme agujero de seguridad? Por ejemplo: <div onmouseover = "alert ('hi');"> hi </div> ¡Lo anterior funciona en la demostración de WMD!
andrewrk

1
@ superjoe30 Eso se filtra en el servidor.
epochwolf

@ superjoe30: Ver meta.stackexchange.com/questions/95821/… - lo mismo se aplica a la versión de JavaScript
balpha

1
@DisgruntledGoat mirando stackexchange.github.io puede ver que está en la lista y la última confirmación fue hace 6 meses (2015 ya).
Loïc Faure-Lacroix

12

Recomendaría marcado , que es liviano, eficiente, fácil de usar y también es compatible con GitHub Flavored Markdown (GFM). Se puede utilizar tanto en el servidor (nodejs) como en el cliente (navegador).


marcado todavía se está desarrollando y la versión minimizada tiene solo 23 KB de tamaño.
Peter T.

7

Hasta donde yo sé, realmente no hay ningún otro editor basado en navegador para Markdown, al menos ninguno tan extenso como el editor WMD.

Showdown es un convertidor de Markdown en JS, que forma la base para la vista previa HTML de WMD. Ambos están hechos por http://attacklab.net/ .

Y hasta donde yo sé, no ha habido grandes quejas sobre ambos (al menos no en la lista de correo de Markdown). Así que adelante.



4

Strapdown.js, que fue lanzado recientemente , "hace que sea vergonzosamente simple crear documentos elegantes de Markdown. No se requiere compilación del lado del servidor".



3

La pregunta es aún más antigua ahora, pero también más relevante ya que gran parte del código mencionado está desactualizado por varios años.

Sin embargo, encontré algunos que todavía parecen actuales:

Jquery-Markedit : esto se bifurcó de wmd-edit hace bastante tiempo y se refactorizó para usar jQuery. Parece bueno a primera vista.

EpicEditor : también se mantiene, tiene un analizador flexible y, como puede ver a continuación, el autor es muy receptivo (ver más abajo). También parece tener buena documentación. Lamentablemente, no funciona con IE9.

MarkdownDeep es una tercera opción que aún está vigente. El punto interesante de este es el soporte para Markdown Extra. Tiene una dependencia de JQuery (en realidad, también puede implementar sin JQuery). Basado en la versión .NET, por lo que la documentación está más alineada con eso que la versión JS. Esto también funciona con IE9. Es muy fácil de usar (con JQuery) y muy simple. Sin embargo, hasta donde yo puedo ver, no hay ningún desarrollo significativo con esto.

js-markdown-extra es un puerto bastante preciso de la biblioteca PHP y todavía está en mantenimiento. Es compatible con Markdown Extra, por supuesto.


1
Las vistas previas en vivo funcionan bien con mi editor :) abre la pantalla completa como ejemplo o simplemente se ejecuta preview()en la tecla o en un tiempo de espera. Está diseñado para cualquier tipo de personalización.
Oscar Godson

1
Entonces, debajo del editor es cómo funciona ahora. Una vez que hace clic en vista previa, muestra la vista previa oculta que se actualiza con lo que escribió. La pantalla completa lo hace (más o menos) a medida que escribe. Para crear su propia vista previa, puede hacer algo como esto: jsbin.com/otuyub/edit#javascript,html
Oscar Godson

1
¿Interceptar? Puede hacer: editor.on('save', function(file) { console.log(file.content) })si eso es lo que quiere decir. Eso escupirá el contenido del archivo cada vez que se guarde el archivo.
Oscar Godson

1
Además, es posible que desee utilizar en on('update')lugar de guardar. Guardar se activará mucho si tiene activado el guardado automático. La actualización solo se activará cuando algo cambie. epiceditor.com/#events
Oscar Godson

1
FYI para cualquiera que lea esto: github.com/OscarGodson/EpicEditor/issues/137 - el problema es que estaba intentando ejecutarse localmente e IE9 tiene restricciones de seguridad contra el uso localStorage localmente a través del archivo: \\\
Oscar Godson

2

La pregunta es antigua, pero con suerte esto podría ayudar a alguien. Recientemente publiqué una versión funcional de mi propio editor de rebajas de Javascript, uedit . Puede encontrar el código fuente aquí . Funciona en la mayoría de los navegadores (incluido IE6 +) y no depende de ninguna biblioteca JS externa.


2

Después de probar con varios complementos para resolver mis propias necesidades de ofrecer un seudo-WYSIWYG de MarkDown, terminé implementando el mío:

Quizás no sea tan potente como todas las soluciones comentadas aquí pero creo que ninguna es tan sencilla y fácil de integrar y personalizar .

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.