Quale editor di Stack Overflow in stile Markdown (WMD) JavaScript dovrei usare?

Question

Sfondo

Sto lavorando a un'applicazione che richiede i contenuti inseriti dall'utente, e ho deciso di utilizzare un editor di Stack Overflow in stile Markdown. Dopo la ricerca di questo argomento per gli ultimi giorni, mi rendo conto che ci sono numerosi forcelle della base editor di WMD, alcuni con alcuni miglioramenti di base e alcuni con gravi differenze da quello Stack Overflow.

Dal momento che questo sarà il cuore dell'applicazione, mi piacerebbe iniziare con la migliore base di codice che posso. Sarei felice se qualcuno può raccomandare che una delle molte soluzioni là fuori meglio si adatta alle mie esigenze.

Di seguito sono riportati i requisiti, oltre a quello che sono riuscito a trovare già. Spero che questa domanda mi aiuterà a decidere quale versione di andare con, e forse aiutarmi a scoprire una porta che è una misura ancora migliore per le mie esigenze.

---

I requisiti per il mio progetto

• Anteprima dal vivo
• più editor sulla stessa pagina (non so quanti in anticipo, dal momento che l'utente può aggiungere dinamicamente un'altra casella di modifica).
• capacità di estendere con pulsanti extra (vorrei un pulsante per caricare una foto, invece di aggiungere un URL img).
• Possibilità di mostrare dinamicamente / nascondere la casella di modifica (e vedere solo la casella di anteprima).
• Non è un must assoluto, ma preferisco restare il più vicino al look and feel di Stack Overflow, dal momento che è ben noto.
• Non so se questo importa, ma il backend è scritto in Django.

Editors Ho guardato

Ecco alcune delle basi di codice che ho guardato, con i pensieri. Ovviamente, potrei mancare un'altra soluzione là fuori.

• Il derobins versione. Da quello che posso dire, questa è la versione ufficiale Stack Overflow. Sembra che non supporta più i redattori su una sola pagina.
• jQuery.MarkEdit . Sembra molto buona, ma è piuttosto diverso dalla versione Stack Overflow.
• MooWMD . Sembra che il vincitore in questo momento, ma io sono un po 'preoccupato dal momento che sembra meno attivo / truccabili di MarkEdit.
• Il WMD-di nuova versione di . Non è sicuro, sembra una vecchia base di codice senza molto uso.
• Il SocialSite ramo . Sembra che non è per uso pubblico.

Answer 1

Alla fine, dopo aver guardato intorno un po 'di più per un editor di ready-made, ho optato per il porto OpenLibrary ADM, che si trova all'indirizzo http://github.com/openlibrary/wmd .

I motivi per cui ho scelto questo editor

1. Meets più di mie esigenze.
2. Sembra che l'editore di Stack Overflow. Ci sono alcune differenze comportamentali (vedi sotto).
3. è costruito sulla base di jQuery (e non richiede MooTools , che è un plus sopra l'altro serio contendente, mooWMD ).

Ho finito per implementare la funzionalità che mostra / nasconde l'Editbox me stesso, che si è rivelata abbastanza facile per la maggior parte. I non hanno esteso l'editor con tutti i pulsanti, che sono sicuro che richiederà un po 'di fare in giro nella sua fonte, ma non credo che sarà affare troppo grande.

Differenze rispetto alla versione Stack Overflow

Ci sono alcune differenze rispetto l'editor Stack Overflow:

1. singolo entra alla fine di linee causano un <br/>, invece di essere considerata un paragrafo. Mi capita di preferire in questo modo, così io sto bene con questo cambiamento.
2. Gli elenchi numerati sono auto-numerati, ala di Microsoft Word. Cioè, colpendo Invio dopo aver scritto "1. prima voce" verrà automaticamente ottenere una linea che inizia con "2". Anche questo è un cambiamento che mi piace molto.

Bene, spero che questo aiuta tutti coloro che cercano un editor simile. Se finisco personalizzare l'editor, creerò la mia filiale (è rilasciato sotto la licenza MIT), ma in questo momento sto ottenendo via senza armeggiare con il codice sorgente.

Answer 2

Bene, a questa domanda (e soluzioni) sono sempre piuttosto vecchio, così ho pensato che forse avrei messo qualcosa fino ad oggi qui. :)

E 'l'inizio del 2014, e quando ho raggiunto lo stesso problema alla fine ho usato PageDown-Bootstrap . Si tratta di un editor di WMD Twitter Bootstrap-based, con Style Bar completamente personalizzabile (barra del tasto).

C'è anche un'alternativa chiamata Bootstrap-Markdown , che anche sembra molto promettente.

Answer 3

Per la parte anteprima dal vivo, il Showdown biblioteca è abbastanza facile da lavorare ( e come sottolinea Edan, è incluso nel codebase)

Si usa qualcosa di simile (non c'è bisogno di utilizzare jQuery se non si vuole)

$(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 funzione update_description_preview utilizza l'oggetto convertitore per leggere il mark-down nell'elemento #id_description e discariche in l'elemento # descrizione-anteprima.

Qui sto chiamando la funzione subito dopo è definito per inizializzare le finestre di anteprima (non v'è stata una parte di testo pre-caricata nell'editor)

Ultimo bit è appena registrando la funzione con l'evento KeyUp.

Answer 4

Non sono sicuro se si adatta perfettamente alle vecchie esigenze, ma un'altra soluzione disponibile nel 2014 è l'editor Open Source Markdown con anteprima sotto licenza Apache 2.0 e creato da software Topten.

Online demo è disponibile qui: http://www.toptensoftware.com/markdowndeep/dingus

Answer 5

standard Markdown comune include un file javascript standalone per convertire Markdown in html. E 'facile da implementare, come mostrato nella Gazzetta demo o questo plunker .

Approssimativamente:

<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);