Editor di testo Markdown WYSIWYG integrato

Alla ricerca di un semplice editor WYSIWYG per il codice Markdown, non trovo un'interfaccia utente paragonabile a quella di CkEditor, TinyMCE, ecc.

In particolare, gli editor Markdown "WYSIWYG" che sono spesso consigliati (come post come questo ) non sono puri editor WYSIWYG, nel senso che gli utenti scrivono ancora Markdown grezzo ( MarkItUp ) o vanno all'altro estremo di avere un editing in linea senza controlli standard ( Hallo ).

Ho bisogno di qualcosa di intermedio.

Sto cercando un editor Markdown che assomigli e funzioni come una casella di testo CkEditor ridotta al minimo e che accetti e restituisca Markdown. Dovrebbe esserci una barra degli strumenti con un set minimo di opzioni di formattazione (B, I, U, elenchi, ect) e l'area di immissione del testo dovrebbe mostrare il Markdown convertito, non il codice grezzo. Dovrebbe esserci un pulsante Sorgente che consentirà agli utenti di modificare il Markdown grezzo, ma anche quello è opzionale. Ex:

Ho il motivo di Markdown / wiki, ecc - la sicurezza che offre. Non mi dispiace inserire il codice grezzo come qui a SE, ma i miei utenti non sono geek e non lo trovano piacevole. Non vogliono vedere * * * ___ e spazi mescolati con il loro testo. Sono utilizzati per l'editing in stile "Word" e sono più produttivi in ​​quell'ambiente.

Quindi, esiste un editor WYSIWYG veramente integrato per Markdown? Sto scrivendo in PHP, quindi qualcosa che posso invocare con una classe sarebbe perfetto.

Aggiornamento del 23 settembre 2015

CKEditor ora ha un addon Markdown che fa esattamente questa cosa. Il progetto addon è ospitato su GitHub .

Screenshots:

Aggiornamento del 13 aprile 2015
Qualcuno che professa di sviluppare CKEditor afferma che l'aspetto di CommonMark è un punto di svolta e che potremmo vedere un'interfaccia di markup adeguata per CKEditor (leggi i commenti per la storia completa).

Aggiornamento del 6 febbraio 2015

CKEditor ora viene fornito con un plug-in che emette (e accetta come input) il BBCode.

Demo: http://ckeditor.com/demo#bbcode

Stavo facendo ricerche su questo argomento l'altro giorno e non ho trovato alcun editor WYSIWYG decente con output Markdown. In effetti, prima devi creare un editor WYSIWG Markdown è un editor HTML WYSIWG e ce ne sono solo alcuni utilizzabili sul mercato.

C'è una possibilità che sarai in grado di creare dataProcessorper CKEditor che cambierà l'editor HTML nell'editor Markdown. Abbiamo un plug-in per BBCode che funziona in questo modo (controlla http://nightly-v4.ckeditor.com/3737/samples/bbcode.html ).

Tutto quello che devi fare è implementare questa interfaccia http://nightly-v4.ckeditor.com/ckeditor_api/#!/api/CKEDITOR.dataProcessor . Se controlli il codice del plugin BBCode vedrai alcuni trucchi e trucchi, perché sfortunatamente l'attuale architettura di CKEditor non è (ancora) pronta per creare un tale elaboratore di dati. Tuttavia, credo che se vuoi fornire solo poche opzioni di stile dovresti essere in grado di implementare il supporto Markdown abbastanza rapidamente.

SimpleMDE , un nuovo arrivato, potrebbe essere la risposta. Sto cercando qualcosa di simile da un mese ormai. Sono sorpreso che questo non venga visualizzato più in alto nei risultati di ricerca. Ho dovuto passare attraverso un avviso su lepture / editor per trovarlo.

EDIT 23 settembre 2015

CKEditor ora ha un addon Markdown che fa esattamente questa cosa. Il progetto addon è ospitato su GitHub .

Screenshots:

Come pubblicato nel mio aggiornamento del 6 febbraio 2015, CKEditor ora include plug-in che consentono l'input e l'output del BBCode.

Una demo è disponibile qui: http://ckeditor.com/demo#bbcode

EDIT 13 aprile 2015:
qualcuno che professa di sviluppare CKEditor dice che l'aspetto di CommonMark è un punto di svolta e potremmo forse vedere un'interfaccia di markup adeguata per CKEditor (leggi i commenti per la storia completa).

Pen è un nuovo editor WYSIWYG (attivo dal 2014) che genera Markdown .
Non è perfetto, ho avuto problemi a incollare l'HTML lì, ma funziona.

Modifica: scusa! Non produce Markdown. Walery Strauch ha sottolineato nei commenti che i segni di formattazione Markdown che ho visto erano in realtà regole di pseudo elementi CSS:

Tuttavia, lo lascerò qui come opzione poiché alcune persone hanno votato positivamente questa risposta e potrebbe essere stata utile a qualcuno.

Ho implementato un editor molto semplice che consente di <textarea>modificare in modo WYSIWYG il contenuto di un Markdown che contiene Markdown.

Ho usato Hallo . Non credo che il suo sito web renda ovvio che non è esso stesso un editor Markdown WYSIWYG, ma la demo forgia il percorso per uno.

Hallo consente la modifica WYSIWYG dell'HTML all'interno di un file <div>. Ho usato javascript per nascondere tutti i <textarea>blocchi che hanno una specifica wysiwygclasse CSS, sostituendolo con a <div>e copiando il contenuto del file <textarea>nel file <div>. La copia viene eseguita attraverso Showdown che produce HTML da Markdown.

Un'altra routine Javascript reagisce ogni volta che i <div>contenuti cambiano. Copia il contenuto nel file (ora nascosto) <textarea>. Il contenuto viene eseguito tramite markdown per convertire da HTML a Markdown.

Se <textarea>è un campo in un <form>, il Markdown modificato verrà inviato al server quando il modulo viene inviato.

L'ispirazione per questo viene dall'esempio di Hallo Markdown , in particolare dal file editor.js . L'ho usato come base per il mio script insieme a hallo.js , showdown.js e to-markdown.js .

Il mio script, wysiwyg.js è un derivato di editor.js dall'esempio di Hallo Markdown . Alcuni punti da notare:

• Lo uso in un'applicazione Rails (non che sia importante)
• Funziona avanti readye page:loadindietro, quest'ultimo perché Rails usa Turbolinks
• Funziona ajaxCompleteperché utilizzo Ajax per i rapporti sugli errori dei moduli
• Ci sono altre dipendenze: JQueryUI e Rangy (gli utenti di Rails possono avvalersi dei gems jquery-ui-rails e rangy-rails ).
• Anche Font Awesome viene utilizzato per le icone della barra degli strumenti. La versione di hallo.jsusata dalla demo non è aggiornata (usa una vecchia versione di Font Awesome ) - usa invece hallo.js da GitHub .

Hai solo bisogno di aggiungere CSS class='wysiwyg'a qualsiasi <textarea>per abilitare WYSIWYG su di esso. Il <textarea>dovrebbe contenere testo formattato Markdown.

Mi aspetto che wysiwyg.js possa essere facilmente adattato per utilizzare un altro editor se non ti piace Hallo fintanto che funziona sull'HTML in un file <div>. Ce ne sono alcuni tra cui scegliere, ma non tutti sono leggeri come Hallo .

Un lavoro sorridente che ho trovato è markdown-html-form . Usa lo stesso Showdown e to-markdown .

Sto anche cercando un editor di markdown descritto all'inizio di questo thread

Hai visto "strumenti di markdown": http://md-wysiwyg.sourceforge.net/

Demo: http://md-wysiwyg.sourceforge.net/cgi-bin/cgi_wysiwyg_test.py/

Sembra abbastanza vicino a quello che stiamo cercando, fa un lavoro ragionevole nel prendere il tuo rich text WYSIWYG e nell'output del markdown. Tuttavia non è riuscito su un'eccezione di codifica quando ho incollato un testo RTF da un documento di Google.