153 lines
7.1 KiB
Markdown
153 lines
7.1 KiB
Markdown
# 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-патч для управления размерами редактора.
|
||
|
||
## Как собрать бандл
|
||
|
||
После клонирования репозитория или обновления зависимостей, выполните:
|
||
|
||
```bash
|
||
# Перейдите в каталог сборки
|
||
cd frontend-assembly
|
||
|
||
# Установите зависимости и соберите бандл
|
||
bash ./build-codemirror6.sh
|
||
```
|
||
|
||
## Как использовать в Django Admin
|
||
|
||
### 1. Подключение в ModelAdmin
|
||
|
||
В вашем `admin.py` используйте `Media` класс для подключения необходимых файлов.
|
||
|
||
```python
|
||
# 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-` атрибуты.
|
||
|
||
```python
|
||
# 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)
|
||
|
||
1. **Добавить зависимость**: Откройте `frontend-assembly/package.json` и добавьте в `devDependencies` новый языковой пакет. Версию выбирайте близкую к другим пакетам `@codemirror/lang-*`.
|
||
|
||
```json
|
||
// package.json
|
||
...
|
||
"@codemirror/lang-json": "6.0.1",
|
||
"@codemirror/lang-xml": "6.1.0", // <-- Новая строка для добавления xml
|
||
"@codemirror/language": "6.12.3",
|
||
...
|
||
```
|
||
|
||
2. **Обновить скрипт сборки**: Откройте `frontend-assembly/build-codemirror6.sh` и внесите два изменения в секцию `cat > "$WORK_DIR/src/editor.js" <<'EOF'`:
|
||
- Добавьте импорт:
|
||
```javascript
|
||
import { xml } from '@codemirror/lang-xml';
|
||
```
|
||
- Добавьте условие для его использования:
|
||
```javascript
|
||
} else if (language === 'xml') {
|
||
extensions.unshift(xml());
|
||
}
|
||
```
|
||
|
||
3. **Пересобрать бандл**:
|
||
```bash
|
||
cd frontend-assembly
|
||
npm install # Установит новый пакет и обновит package-lock.json
|
||
bash build-codemirror6.sh # Пересоберет editor.js с поддержкой XML
|
||
```
|
||
|
||
4. **Использовать в админке**: Теперь вы можете использовать `data-language="xml"` для любого поля.
|
||
|
||
## Обновление зависимостей
|
||
|
||
1. **Проверить устаревшие пакеты**:
|
||
```bash
|
||
cd frontend-assembly
|
||
npm outdated
|
||
```
|
||
2. **Обновить версии**: Аккуратно обновите номера версий в `package.json`.
|
||
3. **Установить обновления и пересобрать**:
|
||
```bash
|
||
npm install
|
||
bash build-codemirror6.sh
|
||
```
|
||
4. **Закоммитить изменения**: Добавьте в коммит обновленные `package.json`, `package-lock.json` и `public/static/codemirror/editor.js`.
|