CodeMirror 6 для Django Admin на LPON.RU

Обзор

Это руководство описывает, как использовать и обновлять сборку CodeMirror 6, которая используется для редактирования текстовых полей в админке Django.

Структура проекта

frontend-assembly/: Исходные файлы и скрипты для сборки.
- package.json: Список зависимостей CodeMirror 6.
- package-lock.json: Файл с зафиксированными версиями зависимостей. Не редактировать вручную!
- build-codemirror6.sh: Скрипт, который генерирует и собирает финальный JS-бандл.
public/static/codemirror/: Каталог с готовыми файлами для Django.
- editor.js: Финальный, минифицированный JS-бандл. Не редактировать вручную!
- codemirror-styles.css: Кастомные стили для интеграции с админкой.
- codemirror-patch.js: JS-патч для управления размерами редактора.

Как собрать бандл

После клонирования репозитория или обновления зависимостей, выполните:

# Перейдите в каталог сборки
cd frontend-assembly

# Установите зависимости и соберите бандл
bash ./build-codemirror6.sh

Как использовать в Django Admin

1. Подключение в ModelAdmin

В вашем admin.py используйте Media класс для подключения необходимых файлов.

# frontend/admin.py

class YourModelAdmin(admin.ModelAdmin):
    class Media:
        css = {
            'all': ('codemirror/codemirror-styles.css',)
        }
        js = (
            'codemirror/editor.js',
            'codemirror/codemirror-patch.js',
        )

2. Активация для полей

Чтобы превратить стандартный Textarea в редактор CodeMirror, используйте кастомную форму или метод formfield_for_dbfield и добавьте к виджету специальные data- атрибуты.

# frontend/admin.py

class YourModelAdmin(admin.ModelAdmin):
    def formfield_for_dbfield(self, db_field, request, **kwargs):
        formfield = super().formfield_for_dbfield(db_field, request, **kwargs)
        
        # Активируем CodeMirror для всех текстовых полей
        if isinstance(formfield.widget, forms.Textarea):
            formfield.widget.attrs['data-codemirror-editor'] = 'true'

            # Устанавливаем язык в зависимости от имени поля
            if 'j_' in db_field.name:
                # Обычно в моделях LPON поля с префиксом 'j_' содержат JSON
                formfield.widget.attrs['data-language'] = 'json'
            elif 'html' in db_field.name:
                formfield.widget.attrs['data-language'] = 'html'
            else:
                formfield.widget.attrs['data-language'] = 'text' # Обычный текст

            # Добавляем утилитарные CSS-классы для стилизации
            if db_field.name == 'i_img_sort':
                formfield.widget.attrs['class'] = 'codemirror-width-s codemirror-no-lines'
            elif db_field.name == 'j_seller_metadata':
                formfield.widget.attrs['class'] = 'codemirror-width-xl codemirror-min-height-m'

        return formfield

3. Поддерживаемые языки

javascript
css
json
html (по умолчанию, в него встроенны режимы подсветки синтенза HTML, XML, CSS и JavaScript)
text (обычный текст, без подсветки синтакса, unocode-режим)

Кастомизация

Управление размерами и стилями

В файле public/static/codemirror/codemirror-styles.css определены утилитарные CSS-классы для управления внешним видом редакторов:

Ширина: .codemirror-width-s, .codemirror-width-m, .codemirror-width-l, .codemirror-width-xl
Минимальная высота: .codemirror-min-height-5 и .codemirror-min-height-10 (по 5 и 10 строк соответственно)
Отключение номеров строк: .codemirror-no-lines

Просто примените нужный класс к атрибуту class виджета в admin.py. По аналогии можно создавать свои классы для своих настройек.

Как добавить новый язык (например, jinja2 или xml)

Добавить зависимость: Откройте frontend-assembly/package.json и добавьте в devDependencies новый языковой пакет. Версию выбирайте близкую к другим пакетам @codemirror/lang-*.
```
// package.json
...
"@codemirror/lang-json": "6.0.1",
"@codemirror/lang-xml": "6.1.0", // <-- Новая строка для добавления xml
"@codemirror/language": "6.12.3",
...
```
Обновить скрипт сборки: Откройте frontend-assembly/build-codemirror6.sh и внесите два изменения в секцию cat > "$WORK_DIR/src/editor.js" <<'EOF':
- Добавьте импорт:
```
import { xml } from '@codemirror/lang-xml';
```
- Добавьте условие для его использования:
```
} else if (language === 'xml') {
  extensions.unshift(xml());
}
```

Пересобрать бандл:

cd frontend-assembly
npm install  # Установит новый пакет и обновит package-lock.json
bash build-codemirror6.sh # Пересоберет editor.js с поддержкой XML

Использовать в админке: Теперь вы можете использовать data-language="xml" для любого поля.

Обновление зависимостей

Проверить устаревшие пакеты:
```
cd frontend-assembly
npm outdated
```
Обновить версии: Аккуратно обновите номера версий в package.json.
Установить обновления и пересобрать:
```
npm install
bash build-codemirror6.sh
```
Закоммитить изменения: Добавьте в коммит обновленные package.json, package-lock.json и public/static/codemirror/editor.js.

7.1 KiB Raw Blame History Unescape Escape