javascript - studio - syntax highlighting

¿Qué editor de JavaScript de Mark Overflow-style Markdown(WMD) debo usar?

Question

Fondo

Estoy trabajando en una aplicación que requiere contenido ingresado por el usuario, y he decidido usar un editor de Markdown Overflow-style Markdown. Después de investigar este tema en los últimos días, me doy cuenta de que hay numerosos diseños del editor de WMD básico, algunos con algunas mejoras básicas y algunos con serias diferencias con el de Stack Overflow.

Dado que este será el corazón de la aplicación, me gustaría comenzar con la mejor base de código que pueda. Estaría feliz si alguien puede recomendar cuál de las muchas soluciones que mejor se ajusta a mis necesidades.

A continuación hay requisitos, más lo que ya he podido encontrar. Espero que esta pregunta me ayude a decidir qué versión usar, y tal vez ayudarme a descubrir un puerto que se ajuste mejor a mis necesidades.

Los requisitos para mi proyecto

• Vista previa en vivo
• Varios editores en la misma página (no sé cuántos por adelantado, ya que el usuario puede agregar dinámicamente otro cuadro de edición).
• Posibilidad de ampliar con botones adicionales (me gustaría un botón para cargar una imagen, en lugar de solo agregar una URL img ).
• Posibilidad de mostrar / ocultar dinámicamente el cuadro de edición (y solo ver el cuadro de vista previa).
• No es una necesidad absoluta, pero preferiría quedarme tan cerca del aspecto y la sensación de Stack Overflow, ya que es bien sabido.
• No sé si esto importa, pero el backend está escrito en Django.

Editores que he visto

Aquí hay algunas de las bases de código que he visto, con pensamientos. Obviamente, podría estar perdiendo otra solución por ahí.

• La versión de derobins . Por lo que puedo decir, esta es la versión oficial de Stack Overflow. Parece que no admite múltiples editores en una página.
• jQuery.MarkEdit . Se ve muy bien, pero es bastante diferente de la versión Stack Overflow.
• MooWMD . Parece el ganador en este momento, pero estoy un poco preocupado ya que parece menos activo / pirateable que MarkEdit.
• La wmd-new versión wmd-new . No estoy seguro, parece una antigua base de código sin mucho uso.
• La rama SocialSite . Parece que no es para uso público.

Answer 1

Al final, después de mirar un poco más en busca de un editor listo, me decidí por el puerto OpenLibrary WMD, ubicado en http://github.com/openlibrary/wmd .

Las razones por las que elegí este editor

1. Cumple con la mayoría de mis requisitos.
2. Parece el editor de Stack Overflow. Hay algunas diferencias de comportamiento (ver abajo).
3. Está construido sobre jQuery (y no requiere MooTools , que es una ventaja sobre el otro contendiente serio, mooWMD ).

Terminé implementando la funcionalidad que muestra / oculta el editor yo mismo, lo que resultó bastante fácil en su mayor parte. No he extendido el editor con ningún botón, lo que estoy seguro requerirá un poco de su origen, pero no creo que sea demasiado importante.

Diferencias de la versión Stack Overflow

Hay algunas diferencias con el editor Stack Overflow:

1. El solo ingresa al final de las líneas causa un <br/> , en lugar de ser considerado un párrafo. Lo prefiero de esta manera, así que estoy bien con este cambio.
2. Las listas numeradas están auto numeradas, al igual que Microsoft Word. Es decir, presionar Enter luego de escribir "1. primer elemento" le dará automáticamente una línea que comienza con "2". Este es también un cambio que realmente me gusta.

Bueno, espero que esto ayude a cualquiera que busque un editor similar. Si termino de personalizar el editor, crearé mi propia rama (está licenciado bajo la licencia de MIT), pero ahora me estoy escapando sin alterar el código fuente.

Answer 2

Bueno, esta pregunta (y las soluciones) se están haciendo bastante viejas, así que pensé que tal vez pondría algo actualizado aquí. :)

Es el comienzo de 2014, y cuando llegué al mismo problema finalmente utilicé PageDown-Bootstrap . Es un editor de WMD basado en Twitter Bootstrap, con barra de estilo totalmente personalizable (barra de botones).

También hay una alternativa llamada Bootstrap-Markdown , que también parece muy prometedora.

Answer 3

No estoy seguro de si se ajusta completamente a los requisitos anteriores, pero otra solución disponible en 2014 es el editor de Markdown de Open Source con vista previa con licencia de Apache 2.0 y creado por el software topten.

La demostración en línea está disponible aquí: http://www.toptensoftware.com/markdowndeep/dingus

Answer 4

Para la parte de vista previa en vivo, la biblioteca Showdown es bastante fácil de trabajar (y como señala Edan, está incluida en la base de código)

Lo usa algo así (no necesita usar jQuery si no lo desea)

$(document).ready(function(){
    var converter = new Attacklab.showdown.converter();
    function update_description_preview(){
        $(''#description-preview'').html(converter.makeHtml($("#id_description").val()));
    }
    update_description_preview();

    $("#id_description").keyup(function(){
        update_description_preview();
    });
});

La función update_description_preview usa el objeto convertidor para leer el marcado en el elemento #id_description y lo vuelca en el elemento # description-preview.

Aquí estoy llamando a la función justo después de que esté definida para inicializar las ventanas de vista previa (había algo de texto precargado en el editor)

El último bit es simplemente registrar la función con el evento keyup.

Answer 5

Standard Common Markdown incluye un archivo javascript independiente para convertir markdown a html. Es fácil de implementar, como se muestra en la demo oficial o este plunker .

Aproximadamente:

<script src="//jgm.github.io/stmd/js/stmd.js"></script>
...
var reader = new stmd.DocParser();
var writer = new stmd.HtmlRenderer();
...
var parsed = reader.parse("Some **markdown** text");
var result = writer.renderBlock(parsed);