Integrierter Markdown WYSIWYG-Texteditor

101

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:

Geben Sie hier die Bildbeschreibung ein

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:

Abschlag WYSIWYG

Abschriftenquelle


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

ein Kodierer
quelle
Ahola Editor, wie in dieser Antwort auf die SO-Frage vorgeschlagen, auf die Sie verlinken, ist ein HTML5-WYSIWYG-Editor, der genau das zu tun scheint, wonach Sie suchen. Es hat sogar einen Hinweis auf das Office-Menüband. Gibt es einen Grund, warum Sie dies abgezinst haben?
Chris
1
Ich fürchte, ich kann Ihren letzten Kommentar nicht wirklich verstehen. Ahola ist wie alle WYSIWYG-Editoren "Edit-in-Place". Das Aholda-Bearbeitungsfeld ist nur ein divund die Symbolleiste ist ein anderes div, 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?
Chris
1
Markdown ersetzt alle diese WYSIWYG-Editoren für sich. Warum sollten Sie Markdown ausgeben müssen?
Pol
4
@Pol: Weil es sicher ist, später zu speichern und anzuzeigen, im Gegensatz zu HTML?
Dan Abramov
1
Ich bekomme diese Frage auch nicht. Entweder verwenden Sie Markdown, um HTML zu generieren, oder Sie verwenden einen WYSIWYG-Editor, um HTML zu generieren. Warum sollten Sie einen WYSIWYG-Editor verwenden, um Markdown zu generieren? Wenn Sie das wirklich möchten, können Sie jederzeit CKeditor verwenden und den HTML-Code in Markdown umwandeln.
mb21

Antworten:

13

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.

Reinmar
quelle
30

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.

Geben Sie hier die Bildbeschreibung ein

HNL
quelle
1
Wow, danke, dass du das geteilt hast - genau das habe ich gesucht. Genial!
Jared White
1
Danke HNL, gleich hier.
Melvin
4
Es ist jedoch nicht wahr, WYSIWYG. Es mischt den Abschlag in das Editorfenster. In dieser Frage wird nach einem Editor gesucht, der sowohl die fertige Ansicht als auch die Quelle in separaten Ansichten anzeigt (mit einer Schaltfläche "Quelle" in der Symbolleiste zum Zappeln).
ein Kodierer
9

EDIT 23. September 2015

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

Screenshots:

Abschlag WYSIWYG

Abschriftenquelle


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

ein Kodierer
quelle
"Tut genau das?" Nach den üblichen Angaben des Add-Ons gibt ckeditor mit diesem Add-On weiterhin HTML und nicht Markdown aus.
user764754
8

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.

Dan Abramov
quelle
Die Stift-Demo ist direkt vor Ort zu bearbeiten, nicht das, woran das OP (ich) interessiert war / ist. Keine Zeit für die Installation in dieser Sekunde. Gibt es eine traditionelle Textfeldoption?
Ein Kodierer
@Acoder: Mein schlechtes! Ich wusste nicht, dass Sie eine feste Symbolleiste wollten. Was ist los mit Halo ? Es hat jetzt eine Symbolleiste ..
Dan Abramov
2
Dies ist immer noch CSS-Layout in diesem Screenshot. Ich möchte Markdown-Daten abrufen (siehe Screenshot i.imgur.com/fM4jFl2.png )
Walery Strauch
1
@WaleryStrauch Wow, ich war wirklich dumm. Ich wusste nicht, dass es nicht wirklich die Ausgabe ist. Tut mir leid, dass ich deine Zeit verschwende! Ich werde die Antwort aktualisieren.
Dan Abramov
3
..es scheint jetzt mindestens Beta-Unterstützung für die Ausgabe von Markdown zu haben.
pjz
4

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 .

Sternenhimmel
quelle
Hey @starfry, ich habe versucht, das, was Sie oben beschrieben haben, mit Ihrem zu reproduzieren 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!
Jameson
1
@ Jameson Ich habe einige Notizen zu meinem Kern hinzugefügt . Ich hoffe sie helfen! Wenn Sie Fragen haben, können Sie dem Kern einen Kommentar hinzufügen.
starfry
3

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.

robertjd
quelle
Der Quellcode für diesen zeigt HTML nicht Markdown.
ein Kodierer