ckeditor - Integrierter Markdown WYSIWYG-Texteditor




wysiwyg html editor ckeditor (5)

Haben Sie das hier versucht: http://mrcoles.com/demo/markdown-css/ Scheint der Beste seiner Art zu sein, und arbeitet 3 Wege, zB HTML-Markdown-Preview

Es fehlt noch eine Sache, das WYSIWYG.

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

Insbesondere die häufig empfohlenen Markdown- "WYSIWYG" MarkItUp (wie solche wie this ) sind keine reinen WYSIWYG-Editoren in dem Sinne, dass Benutzer entweder noch Roh-Markdown ( MarkItUp ) schreiben oder zum anderen Extrem der In-Line-Bearbeitung gehen Standardkontrollen ( Hallo ).

Ich brauche etwas dazwischen.

Ich suche nach einem Markdown-Editor, der wie ein abgespecktes CkEditor-Textfeld aussieht und funktioniert und Markdown akzeptiert und ausgibt. Es sollte eine Symbolleiste mit einem Minimum an Formatierungsoptionen geben (B, I, U, Listen, ect), 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:

Ich bekomme 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 wollen * * * ___ nicht sehen und Leerzeichen mit ihrem Text mischen. Sie werden für die Bearbeitung im Word-Stil verwendet und sind in dieser Umgebung am produktivsten.

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

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 Aktualisierung
Jemand, der sich für die Entwicklung von CKEditor ausgibt, sagt, dass das Erscheinen von CommonMark ein Game Changer ist, und wir könnten möglicherweise eine korrekte Markup-Oberfläche für CKEditor sehen (lesen Sie die Kommentare für die ganze Geschichte).

6. Februar 2015 Aktualisierung

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

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


Ich habe einen sehr einfachen Editor implementiert, der es ermöglicht, den Inhalt einer <textarea> , die Markdown enthält, in WYSIWYG-Weise zu bearbeiten.

Ich habe Hallo benutzt . Ich glaube nicht, dass ihre Website es offensichtlich macht, dass sie nicht selbst ein Markdown WYSIWYG-Editor ist, aber die demo schmiedet den Weg zu einem.

Hallo ermöglicht WYSIWYG-Bearbeitung des HTML innerhalb eines <div> . Ich habe JavaScript verwendet, um <textarea> mit einer bestimmten CSS-Klasse von wysiwyg zu verstecken, indem ich sie durch <div> ersetzte und den Inhalt von <textarea> in <div> kopierte. Der Kopiervorgang läuft durch Showdown der 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 versteckte) <textarea> . Der Inhalt wird bis to-markdown durchlaufen, um von HTML zu Markdown zu konvertieren.

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

Die Inspiration dafür kommt vom demo , speziell von der Datei editor.js . Ich habe das als Basis für mein eigenes Skript zusammen mit hallo.js , hallo.js und to-markdown.js .

Mein Skript wysiwyg.js ist ein Derivat von editor.js aus dem demo . Einige Punkte zu beachten:

  • Ich benutze dies in einer Rails-Anwendung (nicht das ist wichtig)
  • Es läuft auf ready und auch auf page:load , letzteres, weil Rails Turbolinks verwendet
  • Es läuft auf ajaxComplete weil ich Ajax für Formularfehlerberichte verwende
  • Es gibt noch weitere Abhängigkeiten: JQueryUI und Rangy (Rails-Benutzer können die jquery-ui-rails und rangy-rails ).
  • Auch Font Awesome wird für die Symbolleistensymbole verwendet. Die von der demo verwendete Version von hallo.js ist veraltet (sie verwendet eine alte Version von Font Awesome ) - verwenden hallo.js stattdessen hallo.js .

Sie müssen nur CSS class='wysiwyg' zu jedem <textarea> hinzufügen, um WYSIWYG darauf zu aktivieren. Die <textarea> sollte Markdown-formatierten Text enthalten.

Ich würde erwarten, dass wysiwyg.js leicht angepasst werden könnte, um einen anderen Editor zu verwenden, wenn Sie nicht Hallo mögen, solange es auf dem HTML in einem <div> funktioniert. Es gibt eine ganze Reihe von Optionen, aber nicht alle sind so leicht wie Hallo .

Ein kleines Stück Arbeit, das ich gefunden habe, ist markdown-html-form . Es verwendet den gleichen Showdown und den gleichen to-markdown .


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 übernehmen und Markdown auszugeben. Es ist jedoch eine Codierungsausnahme fehlgeschlagen, als ich einen Rich Text von einem Google-Dokument eingefügt habe.


SimpleMDE , ein Neuling, könnte die Antwort sein. Ich habe jetzt seit einem Monat genau so etwas gesucht. Ich bin überrascht, dass dies in den Suchergebnissen nicht höher angezeigt wird. Ich musste eine Mitteilung über lepture/editor , um das 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 angekündigt, enthält CKEditor jetzt Plugins, die BBCode-Eingabe und -Ausgabe ermöglichen.

Eine Demo ist hier verfügbar: http://ckeditor.com/demo#bbcode

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