Обзор markdown редакторов для Django

Цель:

Подобрать удобный инструмент, для работы с markdown из Django админки, без лишних танцев с бубном.

Несколько условий:

• Комфортный предпросмотр результата разметки.

• Возможность подгрузки (upload) изображений прямо из редактора.

• Поддержка DefaultStorage, чтобы можно было использовать интеграцию с django-storages.

• Комфортная работа в редакторе + вменяемый внешний вид.

На djangopackages мне приглянулись 2 библиотеки:

• dracos-markdown-editor и django-markdown-editor - это один и тот же проект martor.

• django-markdownx

Поискав по закоулкам JavaScript, нашёл несколько markdown редакторов и через них вышел на интеграции в Django, но под наши требования подошли не все, рассмотрим один из них.

• django-mdeditor

Для удобства я создал репозиторий с Django проектом, где все эти редакторы подключены к админке.

Приступим:

martor

Ссылка на репозиторий: https://github.com/agusmakmun/django-markdown-editor

Реализован на базе Ace Editor

Плюсы

• Имеет достаточно симпатичный (2 темы на выбор) и удобный интерфейс.

• Удобные "фишки" по типу: обрамления скобками выделенного текста, автозакрытие скобок, автоподстановка символов при наборе списков.

• Поддерживает хоткеи.

• Вставка изображений как через default_storage (что позволяет интегрироваться с django-storage), так и автоматическая выгрузка в imgur.com, без использования собственного хранилища.

• Частые обновления

Минусы

• Возможность переключения между preview/editor только в шапке, что не особо удобно, если много контента.

• Нет поддержки side-by-side, можно указать в настройках 'living': 'true', но это не так удобно, т.к. live preview отображается снизу и если много контента, то приходится постонно скроллить к "вверх/вниз".

• На момент написания статьи, была проблема с XSS в ссылках, учтите это, если захотите использовать редактор за пределами админки и доверенных пользователей.

• Большинство настроек по изображениям - захардкожено в контроллере, можно вынести в настройки самостоятельно, но из коробки это не предусмотрено.

django-markdownx

Ссылка на репозиторий: https://github.com/neutronX/django-markdownx

Это не совсем полноценный редактор, скорее плагин для создания своих темплейтов и форм, но при необходимости, его можно использовать и в панели администратора.
Также обращаю внимание, что на момент выхода статьи, релизная версия библиотеки не поддерживает Django >= 4, можете использовать beta версию, либо сами переопределите у себя пару классов (пример тут)

Плюсы

• Поддержка drag & drop для подгрузки изображений.

• Настройки для подгружаемых изображение (размер, компрессия, кроппинг и т.д.).

Минусы

• Ужасный базовый виджет в админке, неудобно как читать, так и писать. Может я не до конца раскурил как его использовать и необходимы дополнительные плагины или создание кастомного темплейта, но "по умолчанию" это выглядит плохо.

• Редкие обновления

• Скудная документация и описание

django-mdeditor

Ссылка на репозиторий: https://github.com/pylixm/django-mdeditor

Реализован на базе Editor.md.

Плюсы

• Всевозможные реализации preview, тут есть и side-by-sibe, возможность выбрать режим только editor или preview, полноэкранный режим.

• Вспомогательные функции, такие как: помощь при создании табличек, автозакрытие скобок, автосохранение (при переходе на другую страницу без сохранения, можно вернуться и вы не потеряете уже набранный текст, что очень полезно) и т.д..

• Дополнительные параметры конфигурации.

Минусы

• При использовании кнопок, которые вызывают модальные окна, происходит прокрутка страницы в начало, странное поведение.

• Стандартная реализация подгрузки изображений выполнена "странно", там используется своя реализация с os.makedirs() & file.write(), что мешает интеграции с такими батарейками, как django-storages, я закинул PR с исправлениями к ним в репозиторий, но хз, примут или нет. Можете глянуть реализацию, которая сработала для меня тут

Подведем итоги:

Мы рассмотрели несколько готовых интеграций, которые могут удовлетворить наши потребности.

Конечно есть ещё вариант - выбрать понравившийся редактор, допустим SimpleMDE или его поддерживаемый форк EasyMDE (в нём кстати уже есть подгрузка изображений) и собрать свою интеграцию с необходимым функционалом, но тогда поддержка всего этого, ложится на вас.

Я был удивлён, что отсутствует какое-то ультимативное решение, как например django-ckeditor для WYSIWYG редакторов.

Поэтому тут каждый должен решать, что ему необходимо под конкретный кейс, я по итогу остановился на django-mdeditor.

Надеюсь, обзор поможет немного сэкономить ваше время, если перед вами будет стоять подобная задача.

PS

В репозитории вы можете сами "потыкать" различные редакторы и их конфигурации.