Django Visual Editor – современный блочный визуальный редактор для Django

Проект django-visual-editor представляет собой блок‑ориентированный визуальный редактор, который позволяет создавать и редактировать контент прямо в админке Django. Все стили внедряются в HTML‑разметку, поэтому отдельные CSS‑файлы не требуются.

Ключевые возможности

• Блочная архитектура – 6 типов блоков: абзац, заголовок (H1‑H6), список (упорядоченный/неупорядоченный), код, цитата, изображение.
• Контекстная панель инструментов появляется при выборе блока и предлагает только релевантные опции.
• Меню блоков позволяет быстро добавить любой тип блока.
• Inline‑стили (выравнивание, размер, цвет, полужирный, курсив, подчеркивание) без внешних CSS.
• Работа с изображениями – загрузка drag‑and‑drop, изменение размера, замена двойным кликом, выравнивание.
• AI‑ассистент (опционально) – генерация и редактирование контента с помощью моделей OpenAI, Yandex GPT и любых совместимых API.

Установка

Базовая установка из PyPI:

pip install django-visual-editor

Если нужны AI‑функции, установите пакет с дополнительным набором зависимостей:

pip install django-visual-editor[ai]

Настройка Django

Добавьте приложение в INSTALLED_APPS и укажите параметры медиа‑файлов:

INSTALLED_APPS = [
    # …
    'django_visual_editor',
    # …
]

MEDIA_URL = '/media/'
MEDIA_ROOT = BASE_DIR / 'media'

Подключите URL‑ы редактора (и обслуживайте медиа‑файлы в режиме DEBUG):

from django.conf import settings
from django.conf.urls.static import static
from django.urls import include, path

urlpatterns = [
    # …
    path('editor/', include('django_visual_editor.urls')),
    # …
]

if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Выполните миграции:

python manage.py migrate

AI‑ассистент – базовая конфигурация

Для включения AI‑функций добавьте в settings.py переменную VISUAL_EDITOR_AI_CONFIG. Пример конфигурации с Yandex GPT и OpenAI:

import os

VISUAL_EDITOR_AI_CONFIG = {
    'enabled': True,
    'default_model': 'yandex-gpt',
    'temperature': 0.7,
    'max_tokens': 2000,
    'models': [
        {
            'id': 'yandex-gpt',
            'name': 'YandexGPT',
            'provider': 'Yandex',
            'model': f"gpt://{os.getenv('YANDEX_FOLDER_ID')}/yandexgpt/latest",
            'api_key': os.getenv('YANDEX_API_KEY'),
            'base_url': 'https://llm.api.cloud.yandex.net/v1',
            'project': os.getenv('YANDEX_FOLDER_ID'),
        },
        {
            'id': 'gpt-4o',
            'name': 'GPT‑4o',
            'provider': 'OpenAI',
            'model': 'gpt-4o',
            'api_key': os.getenv('OPENAI_API_KEY'),
            'base_url': None,
        },
    ],
}

Не забудьте задать переменные окружения (например, в файле .env):

# Yandex Cloud
YANDEX_API_KEY=your_yandex_api_key
YANDEX_FOLDER_ID=your_folder_id

# OpenAI (по желанию)
OPENAI_API_KEY=sk-...

Как использовать редактор в моделях

Вариант 1 – готовое поле VisualEditorField (рекомендовано)

from django.db import models
from django_visual_editor import VisualEditorField

class BlogPost(models.Model):
    title   = models.CharField(max_length=200)
    content = VisualEditorField(
        config={
            'min_height': 400,
            'max_height': 800,
            'placeholder': 'Начните писать...',
        }
    )

В админке и в формах поле автоматически получает нужный виджет.

Вариант 2 – отдельный виджет VisualEditorWidget

# models.py
from django.db import models

class BlogPost(models.Model):
    title   = models.CharField(max_length=200)
    content = models.TextField()   # обычный TextField

# forms.py
from django import forms
from django_visual_editor import VisualEditorWidget
from .models import BlogPost

class BlogPostForm(forms.ModelForm):
    class Meta:
        model = BlogPost
        fields = ['title', 'content']
        widgets = {
            'content': VisualEditorWidget(
                config={
                    'min_height': 400,
                    'max_height': 800,
                    'placeholder': 'Начните писать...',
                }
            ),
        }

Пример шаблона

    {{ post.content|safe }}




    {% csrf_token %}
    {{ form.as_p }}
    {{ form.media }}   
    Сохранить

AI‑панель в редакторе

• Нажмите кнопку «Add to context» на нужном блоке.
• Откройте правую AI‑панель.
• Выберите модель из выпадающего списка (по умолчанию – модель, указанная в default_model).
• Выберите режим: Generate – создать новый блок, или Edit – улучшить существующий.
• Введите запрос и, при необходимости, дополнительные инструкции.
• Нажмите Generate/Apply – результат появится в редакторе.

Очистка неиспользуемых изображений

Для удаления загруженных, но не использованных в контенте файлов предусмотрена команда:

# С сухим запуском (покажет, что будет удалено)
python manage.py cleanup_editor_images --dry-run

# Реальное удаление
python manage.py cleanup_editor_images

Рекомендуется добавить её в cron для периодической очистки.

Запуск примера проекта

git clone https://github.com/hvlads/django-visual-editor.git
cd django-visual-editor/example_project
python -m venv venv
source venv/bin/activate
pip install -e ".[ai]"
python manage.py migrate
python manage.py createsuperuser   # создайте админа
python manage.py runserver

После запуска откройте в браузере:

• Список постов
• Создание нового поста
• Django‑admin

Ссылки

• GitHub репозиторий: https://github.com/hvlads/django-visual-editor
• PyPI пакет: https://pypi.org/project/django-visual-editor/