Редактирование JSON полей через Django админку

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

У django есть много дополнительных библиотек с помощью которых это можно сделать, например django-codemirror-widget . Но использование подобных библиотек сильно ограничивает ваши возможности, к примеру лишает возможности выбора редактора, усложняет настройки и т.п. В этом случае предпочтительно подключать внешние библиотеки самостоятельно.

В этой статье я покажу как подключить библиотеку codemirror к полю JSON в админке Django.

Для этого первым делом добавим дополнительный класс на выбранные поля что бы удобно было их потом находить при подключение внешних библиотек. Сделаем это через переопределение админ форм:

from django.contrib import admin
from django import forms

from dialogs.models import Dialog


class DialogAdminForm(forms.ModelForm):
    class Meta:
        model = Dialog
        fields = "__all__"
        widgets = {
            'data': forms.Textarea(attrs={'class': 'json-editor'})
        }

@admin.register(Dialog)
class DialogAdmin(admin.ModelAdmin):
    form = DialogAdminForm

Этим кодом мы добавили класс json-editor к полю data. Далее подготовим JS файл, который свяжет поле и редактор codemirror. Назовем его init.js и разместим его где-нибудь в статике проекта:

(function(){
    var $ = django.jQuery;
    $(document).ready(function(){
        $('.json-editor').each(function(idx, el){

            function getSelectedRange() {
                return { from: editor.getCursor(true), to: editor.getCursor(false) };
            }

            var editor = CodeMirror.fromTextArea(el, {
                lineNumbers: true,
                mode: 'application/json',
                gutters: ['CodeMirror-lint-markers'],
                theme: 'rubyblue',
                lint: true
            });
            CodeMirror.commands["selectAll"](editor);
            var range = getSelectedRange();
            editor.autoFormatRange(range.from, range.to);
            
            range = getSelectedRange();
            editor.commentRange(false, range.from, range.to);
        });
    });
})();

Тут происходит две вещи. Во первых подключаем через jquery к каждому полю у которого есть класс .json-editor редактор CodeMirror с соответствующими опциями (например подключаем тему rubyblue). И второе при запуске сразу запускаем автоформатирование значения поля. Без этого наше значение было отображено в виде строки. Чтобы автоформатирование сработало бы нужно будет подключить дополнительную библиотеку formatting.js

Далее подключим js файлы редактора CodeMirror и наш файл init.js

@admin.register(Dialog)
class DialogAdmin(admin.ModelAdmin):
    form = DialogAdminForm

    class Media:
        css = {
            'all': (
                '/static/codemirror/codemirror.css',
                '/static/codemirror/rubyblue.css',
            )
        }
        js = (
            '/static/codemirror/codemirror.min.js',
            '/static/codemirror/formatting.js',
            '/static/codemirror/javascript.js',
            '/static/codemirror/json-lint.min.js',
            '/static/codemirror/init.js'
        )
    

В этого должно получиться как то так:

Codemirror не единственный js редактор, есть еще очень популярный ace, который можно подключить таким же образом.
Так же для редактирования JSON полей есть еще очень интересный проект jsoneditor . Демо версию данного редактора можно посмотреть тут

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