Übersicht der Markdown-Editoren für Django / Sudo Null IT News

Ziel:

Wählen Sie ein praktisches Tool zum Arbeiten mit Markdown aus dem Django-Admin-Panel, ohne unnötig mit einem Tamburin zu tanzen.

Mehrere Bedingungen:

  • Komfortable Vorschau des Markup-Ergebnisses.

  • Möglichkeit zum Hochladen (Hochladen) von Bildern direkt aus dem Editor.

  • Unterstützung für DefaultStorage, damit Sie die django-storages-Integration verwenden können.

  • Komfortables Arbeiten im Editor + gesundes Erscheinungsbild.

Auf der Djangopakete Ich mochte 2 Bibliotheken:

Nachdem ich die Seitenstraßen von JavaScript durchsucht hatte, fand ich mehrere Markdown-Editoren und ging durch sie zur Integration in Django, aber nicht alle erfüllten unsere Anforderungen, betrachten wir einen von ihnen.

Der Einfachheit halber habe ich erstellt Repository mit einem Django-Projekt, bei dem alle diese Editoren mit dem Admin-Panel verbunden sind.

Lass uns anfangen:

Martor

Link zum Repositorium: https://github.com/agusmakmun/django-markdown-editor

Auf der Grundlage implementiert Ace-Editor

Vorteile

  • Es hat eine ziemlich schöne (2 Themen zur Auswahl) und benutzerfreundliche Oberfläche.

  • Praktische “Chips” nach Typ: Einrahmen von ausgewähltem Text mit Klammern, automatisch schließende Klammern, automatische Ersetzung von Zeichen beim Eingeben von Listen.

  • Unterstützt Hotkeys.

  • Einfügen von Bildern sowohl über default_storage (was die Integration mit django-storage ermöglicht) als auch automatisches Hochladen auf imgur.com, ohne Ihren eigenen Speicher zu verwenden.

  • Häufige Aktualisierungen

Minuspunkte

  • Die Möglichkeit, zwischen Vorschau / Editor nur in der Kopfzeile umzuschalten, was bei vielen Inhalten nicht sehr praktisch ist.

  • Es gibt keine Side-by-Side-Unterstützung, man kann in den Einstellungen ‘living’: ‘true’ angeben, aber das ist nicht so praktisch, weil Unten wird eine Live-Vorschau angezeigt und wenn viel Inhalt vorhanden ist, müssen Sie ständig nach “hoch / runter” scrollen.

  • Zum Zeitpunkt des Schreibens gab es Problem mit XSS in Links, beachten Sie dies, wenn Sie den Editor außerhalb des Admin-Bereichs und vertrauenswürdiger Benutzer verwenden möchten.

  • Die meisten Einstellungen für Bilder sind im Controller fest codiert, Sie können sie selbst aus den Einstellungen entfernen, dies ist jedoch nicht standardmäßig vorhanden.

django-markdownx

Link zum Repositorium: https://github.com/neutronX/django-markdownx

Dabei handelt es sich nicht um einen vollwertigen Editor, sondern um ein Plugin zum Erstellen eigener Vorlagen und Formulare, das bei Bedarf aber auch im Admin-Panel verwendet werden kann.
Ich mache Sie auch darauf aufmerksam, dass zum Zeitpunkt der Veröffentlichung des Artikels die Release-Version der Bibliothek Django >= 4 nicht unterstützt, Sie können die Beta-Version verwenden oder selbst einige Klassen überschreiben (Beispiel hier)

Vorteile

  • Drag & Drop-Unterstützung für das Hochladen von Bildern.

  • Einstellungen für hochgeladene Bilder (Größe, Komprimierung, Zuschneiden usw.).

Minuspunkte

  • Schreckliches Basis-Widget im Admin-Panel, unbequem sowohl zum Lesen als auch zum Schreiben. Vielleicht bin ich nicht ganz klar, wie man es benutzt und zusätzliche Plugins oder das Erstellen einer benutzerdefinierten Vorlage sind erforderlich, aber “standardmäßig” sieht es schlecht aus.

  • Seltene Aktualisierungen

  • Schlechte Dokumentation und Beschreibung

django-mdeditor

Link zum Repositorium: https://github.com/pylixm/django-mdeditor

Auf der Grundlage implementiert editor.md.

Vorteile

  • Verschiedene Implementierungen der Vorschau gibt es auch Side-by-Sibe, die Möglichkeit, nur den Editor- oder Vorschaumodus auszuwählen, den Vollbildmodus.

  • Hilfsfunktionen wie: Hilfe beim Erstellen von Zeichen, automatisch schließende Klammern, automatisches Speichern (wenn Sie zu einer anderen Seite wechseln, ohne zu speichern, können Sie zurückgehen und verlieren den bereits eingegebenen Text nicht, was sehr nützlich ist) usw .

  • Zusätzliche Konfigurationsoptionen.

Minuspunkte

  • Bei Verwendung von Schaltflächen, die modale Fenster aufrufen, scrollt die Seite zum Anfang, seltsames Verhalten.

  • Die Standardimplementierung zum Laden von Bildern ist “seltsam”, sie verwendet ihre eigene Implementierung mit os.makedirs() & file.write(), was die Integration mit Batterien wie Django-Storages verhindert, ich habe eine PR mit Korrekturen für sie hineingeworfen Repository, aber xs wird akzeptiert oder nicht. Sie können die Implementierung sehen, die für mich funktioniert hat hier

Fassen wir zusammen:

Wir haben uns mehrere vorgefertigte Integrationen angesehen, die unseren Anforderungen entsprechen können.

Martor

django-markdownx

django-mdeditor

Ergebnisvorschau

Gute Vorschauqualität, aber das Fehlen von Side-by-Side ist etwas nervig

Schrecklich in der Standardkonfiguration

Alles gut. Bequeme Vorschau und mehrere Optionen zur Auswahl.

Bilder hochladen

Normaler Upload + verfügbarer Upload auf imgur.com “out of the box”

Die einzige Option, bei der Drag & Drop verfügbar ist, ist die Möglichkeit, Komprimierung, Zuschneiden usw.

Normales Laden, anpassbar

DefaultStorage-Unterstützung

+

+ (über form.save())

– (Bearbeitung erforderlich)

UI/UX

Nun – es besteht die Möglichkeit, ein Thema auszuwählen, das Vorhandensein von Hotkeys.

Schlecht – soweit ich das verstehe, müssen Sie hier Ihre eigenen Implementierungen schreiben.

Gut – eine reiche Auswahl an Katzen und Helfern, automatisches Speichern. Der Eindruck wird durch Sprünge beim Aufruf von Modalen etwas getrübt.

Natürlich gibt es noch eine weitere Option – wählen Sie zum Beispiel den Editor, den Sie mögen SimpleMDE oder seine unterstützte Gabel EasyMDE (übrigens hat es bereits das Laden von Bildern) und bauen Sie Ihre Integration mit der erforderlichen Funktionalität auf, aber dann fällt die Unterstützung für all dies auf Sie.

Ich war überrascht, dass es keine ultimative Lösung wie django-ckeditor für WYSIWYG-Editoren gibt.

Daher sollte hier jeder entscheiden, was er für einen bestimmten Fall benötigt, und ich habe mich daher für django-mdeditor entschieden.

Ich hoffe, die Überprüfung hilft Ihnen, Zeit zu sparen, wenn Sie vor einer ähnlichen Aufgabe stehen.

PS

BEI Lagerstätten Sie können verschiedene Editoren und deren Konfigurationen selbst “anstupsen”.

Similar Posts

Leave a Reply

Your email address will not be published.