it-swarm.com.de

Integrierter Texteditor Markdown WYSIWYG

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

Insbesondere sind die häufig empfohlenen Markdown-Editoren "WYSIWYG" (z. B. Beiträge wie this ) keine reinen WYSIWYG-Editoren in dem Sinne, dass Benutzer entweder noch rohe Markdown-Editoren ( MarkItUp schreiben ) oder gehen Sie zum anderen Extrem von Inline-Bearbeitung ohne Standard-Steuerelemente ( Hallo ).

Ich brauche etwas dazwischen.

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

enter image description here

Ich bekomme den Grund für Markdown/Wiki, ect - die Sicherheit, die es bietet. Ich habe nichts dagegen, rohen Code wie hier bei SE einzugeben, aber meine Benutzer sind keine Geeks und finden das nicht angenehm. Sie möchten nicht, dass * * * ___ und Leerzeichen mit ihrem Text gemischt werden. Sie werden für die Bearbeitung im Word-Stil verwendet und sind in dieser Umgebung am produktivsten.

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


Aktualisierung am 23. September 2015

CKEditor hat jetzt einen Markdown Addon , der genau das macht. Das Addon-Projekt ist auf Github gehostet .

Screenshots:

markdown WYSIWYG

markdown source


13. April 2015 Update
Jemand, der behauptet, CKEditor zu entwickeln, sagt, dass das Erscheinen von CommonMark ein Game Changer ist und wir möglicherweise eine richtige Markup-Oberfläche für CKEditor (Kommentare für lesen) die ganze Geschichte).


6. Februar 2015 Update

CKEditor enthält jetzt ein Plugin, das BBCode ausgibt (und als Eingabe akzeptiert).

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

99
a coder

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

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

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

13
Reinmar

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.

enter image description here

29
HNL

EDIT 23. September 2015

CKEditor hat jetzt einen Markdown Addon , der genau das macht. Das Addon-Projekt ist auf Github gehostet .

Screenshots:

markdown WYSIWYG

markdown source


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

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

EDIT 13.04.2015:
Jemand, der behauptet, CKEditor zu entwickeln, sagt, dass das Erscheinen von CommonMark ein Game Changer ist und wir möglicherweise eine richtige Markup-Oberfläche für CKEditor (Kommentare für lesen) die ganze Geschichte).

9
a coder

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

Edit: Entschuldigung! Es wird kein Markdown ausgegeben. Walery Strauch wies in den Kommentaren darauf hin, dass die Markdown-Formatierungszeichen, die ich gesehen habe, tatsächlich CSS-Pseudo waren Elementregeln:

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

8
Dan Abramov

Ich habe einen sehr einfachen Editor implementiert, mit dem der Inhalt eines <textarea>, Der Markdown enthält, auf WYSIWYG-Weise bearbeitet werden kann.

Ich habe Hallo verwendet. Ich glaube nicht, dass seine Website es offensichtlich macht, dass es selbst kein Markdown-WYSIWYG-Editor ist, aber das Demo macht den Weg zu einem.

Hallo erlaubt das WYSIWYG-Editieren des HTML in einem <div>. Ich habe Javascript verwendet, um alle <textarea> - Blöcke auszublenden, die eine bestimmte wysiwyg - CSS-Klasse haben, diese durch <div> Zu ersetzen und den Inhalt von <textarea> In die zu kopieren <div>. Der Kopiervorgang läuft durch Showdown , wodurch HTML aus Markdown erzeugt wird.

Eine andere Javascript-Routine reagiert jedes Mal, wenn sich der Inhalt von <div> Ändert. Es kopiert den Inhalt zurück in den (jetzt ausgeblendeten) <textarea>. Der Inhalt wird durch to-markdown geleitet, um von HTML nach Markdown zu konvertieren.

Wenn der <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 Example , insbesondere der editor.js -Datei. Ich habe das als Grundlage für mein eigenes Skript zusammen mit hallo.js , showdown.js und to-markdown.js) verwendet .

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

  • Ich benutze dies in einer Rails Anwendung (nicht das es darauf ankommt)
  • Es läuft auf ready und auch auf page:load, Letzteres, weil Rails Turbolinks verwendet
  • Es wird auf ajaxComplete ausgeführt, da ich Ajax für Formularfehlerberichte verwende
  • Es gibt noch weitere Abhängigkeiten: JQueryUI und Rangy (Rails-Benutzer können die Edelsteine ​​ jquery-ui-Rails und Rangy-Rails) nutzen ).
  • Auch Font Awesome wird für die Symbolleistensymbole verwendet. Die von demo verwendete Version von hallo.js Ist veraltet (es wird eine alte Version von Font Awesome verwendet) - use hallo.js stattdessen von GitHub .

Sie müssen nur CSS class='wysiwyg' Zu jedem <textarea> Hinzufügen, um WYSIWYG darauf zu aktivieren. Das <textarea> Sollte Text im Markdown-Format 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 im HTML in einem <div>. Es stehen einige zur Auswahl, aber nicht alle sind so leicht wie Hallo .

Eine ähnliche Arbeit, die ich gefunden habe, ist markdown-html-form . Es werden die gleichen Showdown und To-Markdown verwendet.

4
starfry

Ich suche auch einen 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 leistet einen vernünftigen Job, indem es Ihren WYSIWYG-Rich-Text aufnimmt und einen Markdown ausgibt. Es ist jedoch aufgrund einer Codierungsausnahme fehlgeschlagen, als ich einen Rich-Text aus einem Google-Dokument eingefügt habe.

3
robertjd