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

Antecedentes

Estoy trabajando en una aplicación que requiere contenido introducido por el usuario, y he decidido usar un editor de Markdown estilo Stack Overflow. Después de investigar este tema durante los últimos días, me doy cuenta de que hay numerosas bifurcaciones del editor base WMD, algunas con algunas mejoras básicas y algunas con serias diferencias con respecto al Desbordamiento de pila.

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

A continuación se presentan los requisitos, además de lo que he logrado encontrar ya. Espero que esta pregunta me ayude a decidir con qué versión ir, y tal vez me ayude a descubrir un puerto que se ajuste aún mejor a mis necesidades.

Los requisitos para mi proyecto

  • Vista previa en vivo
  • Múltiples editores en la misma página (no sé cuántos de antemano, ya que el usuario puede dinámicamente añadir otro cuadro de edición).
  • Posibilidad de ampliar con botones adicionales (me gustaría un botón para cargar una imagen, en lugar de simplemente agregar una URL img).
  • Capacidad para 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 pegarme tan cerca de la apariencia de Stack Overflow, ya que es bien conocido.
  • No sé si esto importa, pero el backend está escrito en Django.

Editores que he buscado at

Aquí están 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 derobins . Por lo que puedo decir, esta es la versión oficial de Stack Overflow. Parece que no admite varios 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 ahora mismo., pero estoy un poco preocupado ya que parece menos activo/hackeable que MarkEdit.
  • The wmd-new version. No estoy seguro, parece una base de código antigua sin mucho uso.
  • La rama SocialSite. Parece que no es para uso público.
Author: Peter Mortensen, 2010-05-20
Source

5 answers

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

Las razones por las que elegí este editor

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

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

Diferencias con respecto a la versión de Desbordamiento de pila

Hay algunas diferencias con respecto al editor de desbordamiento de pila:

  1. Entrada única al final de las líneas causa un <br/>, en lugar de ser considerado un párrafo. Sucede que lo prefiero así, así que estoy bien con este cambio.
  2. Las listas numeradas se numeran automáticamente, ala Microsoft Word. Es decir, golpear Enter después de escribir "1. el primer elemento "te dará automáticamente una línea que comience 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 personalizando el editor, crearé el mío propio branch (está licenciado bajo la licencia MIT), pero en este momento me estoy escapando sin retoques con el código fuente.

 27
Author: Edan Maor,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-05-16 00:52:12

Bueno, esta pregunta (y las soluciones) se están volviendo bastante viejas, así que pensé que quizás pondría algo al día aquí. :)

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

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

 7
Author: Ory Band,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-02-20 17:26:56

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 usas algo como esto (no necesitas usar jQuery si no quieres)

$(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 utiliza el objeto convertidor para leer el markdown 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 se define a inicializar las ventanas de vista previa (había algo de texto precargado en el editor)

El último bit está registrando la función con el evento keyup.

 5
Author: Chris Lawlor,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-02-22 05:13:09

No estoy seguro de si se ajusta completamente a los antiguos requisitos, pero otra solución disponible en 2014 es el editor Markdown de Código Abierto con vista previa bajo Apache 2.0 y creado por topten software.

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

 1
Author: xmojmr,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-04-18 16:35:57

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 en este plunker .

Más o menos: 

<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);
 0
Author: Ben Haley,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-09-05 19:04:41