¿Qué editor de desbordamiento de pila al estilo de rebajas (DMP) JavaScript debe usar?

Question

Fondo

Estoy trabajando en una aplicación que requiere el contenido introducido por el usuario, y he decidido utilizar un editor de desbordamiento de pila al estilo de rebajas. Después de investigar este tema durante los últimos días, me doy cuenta de que hay numerosos tenedores de la base editor de armas de destrucción masiva, algunas de ellas con algunas mejoras básicas y algunos con serias diferencias desde el desbordamiento de pila.

Dado que este será el corazón de la aplicación, me gustaría comenzar con la mejor base de código que pueda. Yo sería feliz si alguien puede recomendar el cual una de las muchas soluciones por ahí mejor se adapte a mis necesidades.

A continuación se presentan los requisitos, además de lo que he logrado encontrar ya. Estoy esperando esta pregunta le ayudará a decidir cuál es la versión para ir con, y tal vez me ayude a descubrir un puerto que es un ajuste aún mejor para mis necesidades.

---

Los requisitos para mi proyecto

• Vista previa en directo
• Múltiples editores en la misma página (no sé cuántos de antemano, ya que el usuario puede añadir dinámicamente otra caja de edición).
• Posibilidad de ampliar con los botones adicionales (me gustaría un botón para subir una imagen, en lugar de limitarse a añadir una URL img).
• Posibilidad de mostrar dinámicamente / ocultar el cuadro de edición (y sólo ver el cuadro de vista previa).
• No es una necesidad absoluta, pero yo preferiría quedarse tan cerca de aspecto y la sensación de desbordamiento de pila, ya que es bien sabido.
• No sé si esto es importante, pero el backend está escrito en Django.

Editores He mirado

Aquí están algunas de las bases de código que he mirado, con pensamientos. Obviamente, puede ser que falte otra solución por ahí.

• El href="http://github.com/derobins/wmd" rel="noreferrer"> derobins versión
• jQuery.MarkEdit . Se ve muy bien, pero es bastante diferente de la versión de desbordamiento de pila.
• MooWMD . Parece que el ganador en este momento, pero estoy un poco preocupado ya que parece menos activo / hackable que MarkEdit.
• El href="http://code.google.com/p/wmd-new/" rel="noreferrer"> ADM nueva versión
• SocialSite rama . Parece que no es para uso público.

Answer 1

Al final, después de mirar un poco más por un editor ya hecho, que se instaló en el puerto OpenLibrary armas de destrucción masiva, se encuentra en http://github.com/openlibrary/wmd .

Las razones por las que eligió este editor

1. Cumple más de mis necesidades.
2. Parece que el editor del desbordamiento de pila. Hay algunas diferencias de comportamiento (véase más adelante).
3. se construye en la parte superior de jQuery (y no requiere MooTools , que es una ventaja sobre el otro serio aspirante, mooWMD ).

Terminé la implementación de la funcionalidad, que muestra / esconde EditBox mí mismo, que resultó bastante fácil en su mayor parte. I tienen no extendido el editor con ningún botón, que estoy seguro que va a requerir algún andar por ahí en su origen, pero no creo que vaya a ser un reparto muy grande.

Diferencias con la versión de desbordamiento de pila

Hay algunas diferencias con el editor de desbordamiento de pila:

1. Single entra en el extremo de las líneas de causar una <br/>, en lugar de ser considerado un párrafo. Sucede que prefiero así, así que estoy bien con este cambio.
2. Las listas numeradas son auto-numerado, al estilo de Microsoft Word. Es decir, golpeando Intro después de escribir "primer punto 1." recibirá 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 buscar un editor similar. Si termino personalizar el editor, voy a crear mi propia rama (que está bajo la licencia MIT), pero en este momento me estoy lejos sin retoques con el código fuente.

Answer 2

Bueno, esta pregunta (y soluciones) están bastante viejo, así que pensé que tal vez me gustaría poner algo hasta la fecha aquí. :)

Es el comienzo de 2014, y cuando alcancé el mismo problema que con el tiempo utilizado PageDown-Bootstrap . Es un editor de armas de destrucción masiva a base de Bootstrap Twitter, con estilo bar completamente personalizable (barra de botones).

También hay una alternativa llamada Bootstrap- de rebajas, que también se ve muy prometedor.

Answer 3

Para la parte de vista previa en vivo, el Enfrentamiento biblioteca es muy fácil trabajar con él ( y como señala Edan, se incluye en el código base)

Se utilizan algo como esto (no es necesario usar jQuery si no quiere)

$(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 la reducción del precio en el elemento de #id_description, y lo vuelca en el elemento # Descripción-vista previa.

Aquí estoy llamando a la función justo después de que se define para inicializar las ventanas de vista previa (había un poco de texto pre-cargado en el editor)

último es simplemente registrando la función con el evento keyup.

Answer 4

No está seguro de si se ajusta plenamente a los requisitos de edad, pero otra solución disponible en el 2014 es el editor de código abierto de rebajas con vista previa licenciado bajo Apache 2.0 y creado por el software topten.

Línea de demostración está disponible aquí: http://www.toptensoftware.com/markdowndeep/dingus

Answer 5

Estándar Común de rebajas incluye un archivo JavaScript independiente de rebaja convertido al HTML. Es fácil de implementar como se muestra en el funcionario de demostración o esta 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);