Интеграция Trix editor в Django

У ребят из Basecamp (ex-37signals) есть неплохой WYSIWYG редактор Trix Editor. Я начал использовать его в своих проектах в качестве основного текстового редактора, мне очень нравится. Ранее я везде использовал Redactor.js. Так как я практически всегда использую веб-фреймворк Django, то я решил сделать reusable django app для интеграции этого редактора.

Установка

pip install django-trix-editor

Для настройки в Django вам необходимо прописать django app в INSTALLED_APPS:

INSTALLED_APPS = [
    ...
    'trix_editor',
    ...
]

Кастомную версию редактора можно указать через константу TRIX_VERSION = '2.0.6' в файле settings.py. Для поддержки загрузки файлов в редакторе необходимо добавить в urls.py следующую строчку:

from django.urls import include, path

urlpatterns = [
    ...
    path('trix-editor/', include('trix_editor.urls')),
    ...
]

По желанию можно настроить права на загрузку в settings.py:

TRIX_UPLOAD_PERMISSION = 'your_model.upload_attachment'

Использование

Поле редактора можно передать напрямую при определении модели:

from django.db import models
from trix_editor.fields import TrixEditorField

class MyModel(models.Model):
    content = TrixEditorField()

Или например использовать в форме в виде виджета:

from django import forms
from trix_editor.widgets import TrixEditorWidget

class MyForm(forms.Form):
    content = forms.CharField(widget=TrixEditorWidget())

Для кастомизации Django Admin достаточно переопределить форму по умолчанию:

class ContentForm(forms.ModelForm):
    class Meta:
        model = Content
        fields = ["title", "content", "status"]
        widgets = {
            "content": TrixEditorWidget(),
        }

@admin.register(Content)
class ContentAdmin(admin.ModelAdmin):
    list_display = ("title", "status", "created", "updated")
    form = ContentForm

В случае с Django Admin все необходимые файлы будут автоматически подключены при формировании шаблона. Если же вы планируете использовать редактор в своих собственных шаблонах, то media-файлы нужно задавать явно: