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).
quelle
divund die Symbolleiste ist ein anderesdiv, dies könnten die einzigen Dinge auf der Seite sein. Die Ahola-Lösung erfüllt Ihre Anforderungen an einen "Mindestsatz an Formatierungsoptionen (B, I, U, Listen usw.), und im Texteingabebereich sollte der konvertierte Markdown und nicht der Rohcode angezeigt werden." Können Sie bitte klarer erklären, warum dies keine Lösung ist, die Sie in Betracht ziehen werden?Antworten:
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.
quelle
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.
quelle
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).
quelle
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.
quelle
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 bestimmtenwysiwygCSS-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:
readyund auch weiterpage:load, letzteres, weil Rails Turbolinks verwendetajaxCompleteweil ich Ajax für Formularfehlerberichte verwendehallo.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 .
quelle
wysiwyg.js, aber keine großen Erfolge erzielt. Sie fragen sich, ob Sie irgendwo auch einen begleitenden HTML-Code in einem Kern haben? Stabile Versionsliste der Abhängigkeiten usw.? Vielen Dank!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.
quelle