Integrierter Markdown WYSIWYG-Texteditor

Auf der Suche nach einem einfachen WYSIWYG-Editor für Markdown-Code finde ich keine vergleichbare Benutzeroberfläche wie die von CkEditor, TinyMCE usw.

Insbesondere sind die häufig empfohlenen Markdown-Editoren "WYSIWYG" (z. B. Beiträge wie diese ) keine reinen WYSIWYG-Editoren in dem Sinne, dass Benutzer entweder noch rohen Markdown ( MarkItUp ) schreiben oder das andere Extrem der Inline-Bearbeitung ohne erreichen Standardsteuerung ( Hallo ).

Ich brauche etwas dazwischen.

Ich suche einen Markdown-Editor, der wie ein abgespecktes CkEditor-Textfeld aussieht und funktioniert und Markdown akzeptiert und ausgibt. Es sollte eine Symbolleiste mit einem Mindestsatz an Formatierungsoptionen (B, I, U, Listen usw.) vorhanden sein, und im Texteingabebereich sollte der konvertierte Markdown und nicht der Rohcode angezeigt werden. Es sollte eine Quell-Schaltfläche geben, mit der Benutzer den rohen Markdown bearbeiten können, aber auch das ist optional. Ex:

Ich verstehe den Grund für Markdown / Wiki, ect - die Sicherheit, die es bietet. Es macht mir nichts aus, Rohcode wie hier bei SE einzugeben, aber meine Benutzer sind keine Geeks und finden das nicht angenehm. Sie möchten nicht * * * ___ und Leerzeichen sehen, die mit ihrem Text gemischt sind. Sie sind an die Bearbeitung im "Word" -Stil gewöhnt und in dieser Umgebung am produktivsten.

Also - gibt es einen wirklich integrierten WYSIWYG-Editor für Markdown? Ich schreibe in einem PHP, also wäre etwas, das ich mit einer Klasse aufrufen kann, perfekt.

23. September 2015 Update

CKEditor hat jetzt ein Markdown- Addon , das genau das tut. Das Addon-Projekt wird auf Github gehostet .

Screenshots:

13. April 2015 Update
Jemand, der sich zur Entwicklung von CKEditor bekennt, sagt, dass das Erscheinungsbild von CommonMark ein Game Changer ist und wir möglicherweise eine geeignete Markup-Oberfläche für CKEditor sehen könnten (lesen Sie die Kommentare für die ganze Geschichte).

6. Februar 2015 Update

CKEditor wird jetzt mit einem Plugin geliefert, das BBCode ausgibt (und als Eingabe akzeptiert).

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

Ich habe neulich in diesem Thema recherchiert und keinen anständigen WYSIWYG-Editor mit Markdown-Ausgabe gefunden. In der Tat müssen Sie zuerst einen WYSIWG Markdown-Editor erstellen, der WYSIWG HTML-Editor ist, und es gibt nur wenige davon, die auf dem Markt verwendet werden können.

Es besteht die Möglichkeit, dass Sie dataProcessorfür CKEditor einen HTML-Editor in einen Markdown-Editor ändern können. Wir haben ein Plugin für BBCode, das so funktioniert (siehe http://nightly-v4.ckeditor.com/3737/samples/bbcode.html ).

Sie müssen lediglich diese Schnittstelle http://nightly-v4.ckeditor.com/ckeditor_api/#!/api/CKEDITOR.dataProcessor implementieren . Wenn Sie den Code des BBCode-Plugins überprüfen, werden Sie einige Hacks und Tricks sehen, da die aktuelle CKEditor-Architektur (noch) leider nicht bereit ist, einen solchen Datenprozessor zu erstellen. Ich bin jedoch der Meinung, dass Sie die Markdown-Unterstützung ziemlich schnell implementieren können sollten, wenn Sie nur wenige Styling-Optionen bereitstellen möchten.

SimpleMDE , ein Neuling, könnte die Antwort sein. Ich habe jetzt seit einem Monat nach so etwas gesucht. Ich bin überrascht, dass dies in den Suchergebnissen nicht höher angezeigt wird. Ich musste einen Hinweis auf Lepture / Editor durchgehen , um dies zu finden.

EDIT 23. September 2015

CKEditor hat jetzt ein Markdown- Addon , das genau das tut. Das Addon-Projekt wird auf Github gehostet .

Screenshots:

Wie in meinem Update vom 6. Februar 2015 veröffentlicht, enthält CKEditor jetzt Plugins, die die Ein- und Ausgabe von BBCode ermöglichen.

Eine Demo finden Sie hier: http://ckeditor.com/demo#bbcode

EDIT 13. April 2015:
Jemand, der sich zur Entwicklung von CKEditor bekennt, sagt, dass das Erscheinungsbild von CommonMark ein Game Changer ist und wir möglicherweise eine geeignete Markup-Oberfläche für CKEditor sehen könnten (lesen Sie die Kommentare für die ganze Geschichte).

Pen ist ein neuer (seit 2014 aktiver) WYSIWYG-Editor, der Markdown ausgibt .
Es ist nicht perfekt - ich hatte Probleme beim Einfügen von HTML -, aber es funktioniert.

Edit: Sorry! Markdown wird nicht ausgegeben. Walery Strauch wies in den Kommentaren darauf hin, dass die Markdown-Formatierungszeichen, die ich sah, tatsächlich CSS-Pseudoelementregeln waren:

Trotzdem lasse ich es hier als Option, da einige Leute diese Antwort positiv bewertet haben und sie möglicherweise für jemanden von Nutzen war.

Ich habe einen sehr einfachen Editor implementiert, mit dem der Inhalt eines <textarea>Markdowns mit WYSIWYG bearbeitet werden kann.

Ich habe Hallo benutzt . Ich glaube nicht, dass die Website deutlich macht, dass es sich nicht um einen Markdown WYSIWYG-Editor handelt, aber die Demo schlägt den Weg zu einem.

Hallo ermöglicht die WYSIWYG-Bearbeitung des HTML-Codes in a <div>. Ich habe Javascript verwendet, um alle <textarea>Blöcke mit einer bestimmten wysiwygCSS-Klasse auszublenden , durch a zu ersetzen <div>und den Inhalt von <textarea>in die zu kopieren <div>. Das Kopieren läuft über Showdown , das HTML aus Markdown erzeugt.

Eine andere Javascript-Routine reagiert jedes Mal, wenn sich der <div>Inhalt ändert. Es kopiert den Inhalt zurück in die (jetzt ausgeblendete) <textarea>. Der Inhalt wird bis zum Markdown durchlaufen , um von HTML nach Markdown zu konvertieren.

Wenn das <textarea>ein Feld in einem <form> ist, wird der bearbeitete Markdown an den Server gesendet, wenn dieses Formular gesendet wird.

Die Inspiration dafür stammt aus dem Hallo Markdown-Beispiel , insbesondere aus der Datei editor.js . Früher habe ich das als Grundlage für mein eigenes Skript zusammen mit hallo.js , showdown.js und zu markdown.js .

Mein Skript wysiwyg.js ist eine Ableitung von editor.js aus dem Hallo Markdown-Beispiel . Einige Punkte zu beachten:

• Ich benutze dies in einer Rails-Anwendung (nicht, dass das wichtig ist)
• Es läuft weiter readyund auch weiter page:load, letzteres, weil Rails Turbolinks verwendet
• Es läuft weiter, ajaxCompleteweil ich Ajax für Formularfehlerberichte verwende
• Es gibt andere Abhängigkeiten: JQueryUI und Rangy (Rails-Benutzer können die Edelsteine jquery-ui-Rails und Rangy-Rails verwenden ).
• Auch Font Awesome wird für die Symbolleistensymbole verwendet. Die hallo.jsvon der Demo verwendete Version ist veraltet (es wird eine alte Version von Font Awesome verwendet ) - verwenden Sie stattdessen hallo.js von GitHub .

Sie müssen nur CSS hinzufügen class='wysiwyg'zu einem <textarea>WYSIWYG auf sie zu aktivieren. Der <textarea>sollte Markdown-formatierten Text enthalten.

Ich würde erwarten, dass wysiwyg.js leicht angepasst werden kann, um einen anderen Editor zu verwenden, wenn Sie Hallo nicht mögen, solange es mit HTML in a funktioniert <div>. Es gibt einige zur Auswahl, aber nicht alle sind so leicht wie Hallo .

Eine ähnliche Arbeit, die ich gefunden habe, ist Markdown-HTML-Form . Es wird der gleiche Showdown und Markdown verwendet .

Ich suche auch nach einem Markdown-Editor, der oben in diesem Thread beschrieben wird

Haben Sie "Markdown-Tools" gesehen: http://md-wysiwyg.sourceforge.net/

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

Das scheint ziemlich nah an dem zu sein, wonach wir suchen. Es macht einen vernünftigen Job, Ihren WYSIWYG-Rich-Text zu nehmen und Abschriften auszugeben. Bei einer Codierungsausnahme ist dies jedoch fehlgeschlagen, als ich Rich Text aus einem Google-Dokument eingefügt habe.