Welche Stack Overflow-Stil Markdown (WMD) JavaScript-Editor soll ich verwenden?

StackOverflow https://stackoverflow.com/questions/2874646

Frage

Hintergrund

Ich arbeite an einer Anwendung, die vom Benutzer eingegebenen Inhalte erfordert, und ich habe beschlossen, einen Stack-Überlauf-Stil Markdown-Editor zu verwenden. Dieses Thema für die letzten paar Tage nach der Erforschung, ich weiß, es gibt einige mit ein paar grundlegende Verbesserungen und einige mit schweren Differenzen aus der Stack-Überlauf ein.

zahlreiche Gabeln des Basis WMD-Editor,

Da dies das Herz der Anwendung sein wird, würde Ich mag die beste Code-Basis starten ich kann. Ich würde mich freuen, wenn jemand empfehlen kann, die eine der vielen Lösungen gibt am besten meine Bedürfnisse passt.

Im Folgenden sind Anforderungen, und was ich habe es geschafft, schon zu finden. Ich hoffe, diese Frage wird mir helfen, zu entscheiden, welche Version mit zu gehen, und vielleicht helfen Sie mir einen Hafen entdecken, die eine noch bessere Passform für meine Bedürfnisse sind.

Die Anforderungen für mein Projekt

  • Live-Vorschau
  • Mehrere Editoren auf der gleichen Seite (ich weiß nicht, wie viele im Voraus, da der Benutzer dynamisch ein anderes Bearbeitungsfeld hinzufügen).
  • Die Fähigkeit, mit zusätzlichen Tasten zu verlängern (ich einen Knopf mag ein Bild zu, anstatt nur das Hinzufügen eines img URL).
  • Die Fähigkeit, dynamisch ein- / auszublenden das Bearbeitungsfeld (und sieht nur das Vorschaufeld).
  • Nicht ein absolutes Muss, aber ich würde es vorziehen, so nahe stehen zu Stack-Überlauf des Look and Feel, da es gut bekannt ist.
  • Sie wissen nicht, ob diese Dinge, aber das Backend in Django geschrieben.

Herausgeber Ich habe auf

sah

Hier sind einige der Codebasis ich angeschaut habe, mit Gedanken. Natürlich, ich könnte eine andere Lösung gibt, fehlen.

  • Die derobins Version. Von dem, was ich sagen kann, ist dies die offizielle Stack-Überlauf-Version. Scheint, wie es nicht möglich, mehrere Editoren auf einer Seite nicht unterstützt.
  • jQuery.MarkEdit . Sieht sehr gut aus, aber ziemlich verschieden von der Stack-Überlauf-Version.
  • MooWMD . Sieht aus wie der Sieger im Moment, aber ich bin ein wenig besorgt, da sie weniger aktiv / hackable als MarkEdit aussieht.
  • Die wmd-new Version. Nicht sicher, sieht aus wie eine alte Code-Basis, ohne viel.
  • Die SocialSite Zweig . Scheint, wie es ist nicht für den öffentlichen Gebrauch.
War es hilfreich?

Lösung

Am Ende, nach ein wenig mehr für ein fertiges Editor schaut sich um, ließ ich mich auf dem Openlibrary WMD-Port, auf http://github.com/openlibrary/wmd .

Die Gründe wählte ich diesen Editor

  1. Erfüllt die meisten meiner Anforderungen.
  2. Sieht aus wie Stack-Überlauf des Editors. Es gibt ein paar Verhaltensunterschiede (siehe unten).
  3. Sie oben auf jQuery gebaut (und erfordert keine MooTools , das ist ein Plus über den anderen ernsthaften Anwärter, mooWMD ).

beenden ich die Funktionalität der Umsetzung auf die zeigt / versteckt die editbox selbst, die zum größten Teil ziemlich einfach erwiesen. I haben nicht , um den Editor mit irgendwelchen Tasten erweitert, die ich sicher bin, wird in der Quelle einige Herumspielen erfordern, aber ich glaube nicht, dass allzu große Sache sein wird.

Differenzen aus der Stack-Überlauf-Version

Es gibt ein paar Unterschiede zu dem Stack Overflow-Editor:

  1. tritt in Einzel am Ende der Linien Ursache eines <br/>, statt einem Absatz wird. Ich geschehe es auf diese Weise bevorzugen, so dass ich mit dieser Änderung geht es gut.
  2. Nummerierte Listen werden automatisch nummeriert, ala Microsoft Word. Das heißt, schlagen Enter nach „1. erste Punkt“ Schreiben Sie automatisch erhalten eine Zeile, die beginnt mit „2“. Dies ist auch eine Änderung, die ich wirklich mag.

Nun, ich hoffe, dass dies jemand für einen ähnlichen Editor der Suche hilft. Wenn ich den Editor am Ende Customizing, werde ich meine eigene Niederlassung schaffen (es ist unter der MIT-Lizenz veröffentlicht), aber im Moment bin ich immer weg, ohne den Quellcode bastelt.

Andere Tipps

Nun, diese Frage (und Lösungen) sind schon ziemlich alt, so dass ich dachte, vielleicht würde ich etwas hier auf dem neuesten Stand setzen. :)

Es ist der Anfang des Jahres 2014, und wenn ich das gleiche Problem erreicht habe ich schließlich BildAb-Bootstrap . Es ist ein Twitter Bootstrap-basierter WMD-Editor, mit vollständig anpassbaren Style Bar (Button Bar).

Es gibt auch eine Alternative namens Bootstrap-Markdown , die auch sehr vielversprechend aussieht.

Für die Live-Vorschau Teil der Showdown Bibliothek ist recht einfach zu Arbeit mit ( und wie Edan weist darauf hin, in der Code-Basis enthält)

Sie nutzen es so etwas wie dieses (tun müssen, nicht jQuery verwenden, wenn Sie nicht wollen) 

$(document).ready(function(){
    var converter = new Attacklab.showdown.converter();
    function update_description_preview(){
        $('#description-preview').html(converter.makeHtml($("#id_description").val()));
    }
    update_description_preview();

    $("#id_description").keyup(function(){
        update_description_preview();
    });
});

Die update_description_preview Funktion verwendet das Konverter-Objekt den Abschlag im #id_description Elemente zu lesen, und gibt sie in das # Beschreibung-Vorschau Element.

Hier habe ich die Funktion richtig nenne, nachdem es definiert wird, um die Vorschaufenster initialisiert wird (es einiger Text wurde im Editor vorinstalliert)

Zuletzt Bit registriert nur die Funktion mit dem keyup Ereignisse.

Nicht sicher, ob es passt voll und ganz auf die alten Anforderungen, aber eine andere Lösung zur Verfügung im Jahr 2014 ist die Open Source-Editor mit Markdown Vorschau unter Apache Lizenz 2.0 und erstellt von topten Software.

Online-Demo finden Sie hier: http://www.toptensoftware.com/markdowndeep/dingus

Standard Gemeinsame Markdown eine Datei zu konvertieren Abschlag zu html eigenständigen JavaScript enthält. Es ist leicht zu implementieren, wie in der offiziellen gezeigt Demo oder diese Plunker .

Grob: 

<script src="//jgm.github.io/stmd/js/stmd.js"></script>
...
var reader = new stmd.DocParser();
var writer = new stmd.HtmlRenderer();
...
var parsed = reader.parse("Some **markdown** text");
var result = writer.renderBlock(parsed);
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top